CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-datetimepicker
writeToBhuwan
writeToBhuwan

Reputation: 3281

Bootstrap 3 datetimepicker events not firing up

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.

Upvotes: 44

Views: 82065

Answers (4)

Kamlesh
Kamlesh

Reputation: 6135

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

Upvotes: 0

glerendegui
glerendegui

Reputation: 1507

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

Upvotes: 4

da Rocha Pires
da Rocha Pires

Reputation: 2492

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

Upvotes: 6

itsmejodie
itsmejodie

Reputation: 4228

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.

Upvotes: 63

Related Questions