Bootstrap 3 datetimepicker events not firing up

Question

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

$('#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);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<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.

Solution 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.

Solution 2

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

Solution 3

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

Comments

[BENARD Patrick]

Can you make a fiddle with your plugin inside please ?

[writeToBhuwan]

I tried making the fiddle but I am not able to add bootstrap functionalities to it?

[BENARD Patrick]

You have skeleton ever existing like : jsfiddle.net/brainbolt/52VtD/4

[duyn9uyen]

I am having the same trouble and I'm using the plugin from eonasdan. Neither change.dp or dp.change is firing.

[duyn9uyen]

Nevermind. I had the scripts in the wrong order. It seems like both events are working. Here. jsfiddle.net/QM8eC/4

[Yebach]

for change.dp I am getting an error undefined is not a function for setMaxDate, while dp.change is not working. How come?

[tthayer]

This has been biting me over and over this last project. Thanks for the succinct reminder!

[Camilo]

There is another fork that goes by smalot/bootstrap-datetimepicker which uses change.dp too.

[Aline Matos]

Thank you! I thought I was using eonasdan plugin... haha