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.

I tried making the fiddle but I am not able to add bootstrap functionalities to it? — writeToBhuwan, Mar 19 '14 at 09:40
You have skeleton ever existing like : http://jsfiddle.net/brainbolt/52VtD/4/ — BENARD Patrick, Mar 19 '14 at 12:25

score 62 · Accepted Answer · answered Apr 03 '14 at 04:38

62

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:

The version you provided in your question: http://eonasdan.github.io/bootstrap-datetimepicker/
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.

answered Apr 03 '14 at 04:38

itsmejodie

4,148
1
18
20

1

I am having the same trouble and I'm using the plugin from eonasdan. Neither change.dp or dp.change is firing. – duyn9uyen Apr 10 '14 at 20:47
5

Nevermind. I had the scripts in the wrong order. It seems like both events are working. Here. http://jsfiddle.net/QM8eC/4/ – duyn9uyen Apr 11 '14 at 01:44
for change.dp I am getting an error undefined is not a function for setMaxDate, while dp.change is not working. How come? – Yebach Jul 02 '14 at 08:50
This has been biting me over and over this last project. Thanks for the succinct reminder! – tthayer May 04 '15 at 21:17
There is another fork that goes by [smalot/bootstrap-datetimepicker](https://github.com/smalot/bootstrap-datetimepicker) which uses `change.dp` too. – Camilo Jul 10 '16 at 04:18

score 6 · Answer 2 · edited Feb 20 '17 at 10:28

6

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

edited Feb 20 '17 at 10:28

Hakan Fıstık

16,800
14
110
131

answered Mar 24 '14 at 16:57

da Rocha Pires

2,443
1
24
19

score 4 · Answer 3 · answered Aug 17 '18 at 19:56

4

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

answered Aug 17 '18 at 19:56

glerendegui

1,457
13
15

Thank you! I thought I was using eonasdan plugin... haha – Aline Matos Apr 03 '19 at 09:55

score 0 · Answer 4 · answered Jul 23 '19 at 06:04

0

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

answered Jul 23 '19 at 06:04

Kamlesh

5,233
39
50

Bootstrap 3 datetimepicker events not firing up

4 Answers4

Linked