web-dev-qa-db-fra.com

Bootstrap 3 événements datetimepicker ne se déclenchent pas

J'utilise Bootstrap 3 DateTimePicker et j'essaie l'exemple 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>

Le calendrier s'affiche selon les besoins, mais les événements tels que dp.change, dp.hide, dp.show ne se déclenchent pas .. Quel pourrait être le problème? De l'aide?

EDIT: Veuillez noter que j'ai inclus tous les fichiers nécessaires, tels que Bootstrap js, bootstrap css, Moment.js et les fichiers datetimepicker js et css.

javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-datetimepicker
41
writeToBhuwan

Cela peut sembler idiot, mais avez-vous vérifié que vous utilisez le même plugin bootstrap-datetimepicker.js auquel vous faites référence dans votre question?

Je connais deux versions très similaires:

  1. La version que vous avez fournie dans votre question: http://eonasdan.github.io/bootstrap-datetimepicker/
  2. Une version légèrement différente: http://www.eyecon.ro/bootstrap-datepicker/

La première version répond à change.dp, tandis que la deuxième version répond à dp.change.

Il suffit de vérifier les commentaires en haut du bootstrap-datetimepicker.js pour voir celui que vous utilisez.

53
itsmejodie

Vérifiez si vous chargez moment.js avant de charger datetimepicker.js

6
da Rocha Pires

Tempus Dominus (défini comme le successeur du très populaire Eonasdan/bootstrap-datetimepicker) semble avoir changé d’événement pour changer.datetimepicker. 

0
glerendegui