Bootstrap 3 datetimepicker events not firing up

Question

I am using Bootstrap 3 DateTimePicker and I am trying example 8 (Linked datetimepicker).

Javascript

$('#dpStart').datetimepicker({
     pickDate: true,                 //en/disables the date picker
     pickTime: false,
     format: "DD-MM-YYYY",
     useMinutes: false,               //en/disables the minutes picker
     useSeconds: false
});

$('#dpEnd').datetimepicker({
     pickDate: true,                 //en/disables the date picker
     pickTime: false,
     format: "DD-MM-YYYY",
     useMinutes: false,               //en/disables the minutes picker
     useSeconds: false
});

$("#dpStart").on("dp.change", function(e) {
     alert('hey');
     $('#dpEnd').data("DateTimePicker").setMinDate(e.date);
});

$("#dpEnd").on("dp.change", function(e) {
     $('#dpStart').data("DateTimePicker").setMaxDate(e.date);
});

HTML

<div class="row">
  <div class="col-md-6 col-sm-6 form-group">
    <label for="txtStartDate">
      Start Date-Time</label>
    <div class="input-group date" id="dpStart" data-date-format="DD-MM-YYYY">
      <asp:TextBox ID="txtStartDate" runat="server" CssClass="form-control"></asp:TextBox>
      <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
  <div class="col-md-6 col-sm-6 form-group">
    <label for="txtEndDate">
      End Date-Time</label>
    <div class="input-group date" id="dpEnd" data-date-format="DD-MM-YYYY">
      <asp:TextBox ID="txtEndDate" runat="server" CssClass="form-control"></asp:TextBox>
      <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

Calender is showing as per the needs but the events like dp.change, dp.hide, dp.show are not firing up.. What could be the problem? Any help?

EDIT: Please note that I've included all necessary files like Bootstrap js, bootstrap css, Moment.js and datetimepicker js and css files.

Answer 1

This may seem silly, but did you check you're using the same bootstrap-datetimepicker.js plugin that you're referring to in your question?

There are two versions I know of which are very similar:

1. The version you provided in your question: http://eonasdan.github.io/bootstrap-datetimepicker/
2. A slightly different version: http://www.eyecon.ro/bootstrap-datepicker/

The first version responds to change.dp, while the second version responds to dp.change.

Just check the comments at the top of the bootstrap-datetimepicker.js to see which one you're using.

Answer 2

Check if you are loading moment.js before loading datetimepicker.js

Answer 3

Tempus Dominus (self-defined as the successor to the very popular Eonasdan/bootstrap-datetimepicker) seems to have changed event to change.datetimepicker.

Answer 4

I am using bootstrap datetime picker. After doing lots of research, below code works for me:

$('.data_date_of_birth').on('changeDate', function(event) {
  alert($(this).val());
});