Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
397 views
in Technique[技术] by (71.8m points)

javascript - 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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...