Marilee Marilee - 3 months ago 28
HTML Question

Bootstrap Date Time Picker No Response

I have followed the example given at http://www.eyecon.ro/bootstrap-datepicker/# to the letter.

Im trying to do disabling dates in the past and dependent disabling.

You can view my JSFIDDLE here.

This is my head:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="datepicker/css/datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="datepicker/js/bootstrap-datepicker.js"></script>


Below Is my Code as per the example:

<script>
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('#dpd1').datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkout.hide();
}).data('datepicker');
</script>

<input type="text" id="dpd1" value="" class="span2">
<input type="text" id="dpd2" value="" class="span2">


My problem...Well the browser, neither firefox - firebug or chrome are displaying any errors, however when I click on text field it is unresponsive i.e. nothing happens. I can confirm datepicker.js & css are linked correctly as verified by dreamweaver.

Not really sure what I am missing here, perhaps I didn't get something in the tutorial, if anyone could give this a quick scan would be greatly appreciated.

Answer

You never called datepicker

$(document).ready(function() { $('.datepicker').datepicker() //now do your stuff var nowTemp = new Date(); : :

Comments