CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Marilee
Marilee

Reputation: 1598

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.

Upvotes: 0

Views: 199

Answers (1)

Tim C
Tim C

Reputation: 5714

You never called datepicker

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

Upvotes: 1

Related Questions