javascript-Bootstrap 3 datetimepicker事件未触发

我正在使用Bootstrap 3 DateTimePicker,并且正在尝试示例8(链接的datetimepicker)。

Java脚本

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

日历根据需要显示,但是诸如dp.change,dp.hide和dp.show之类的事件未启动。.可能是什么问题? 有什么帮助吗?

编辑:请注意,我已经包含了所有必要的文件,例如Bootstrap js,bootstrap css,Moment.js和datetimepicker js和css文件。

4个解决方案
56 votes

这似乎很愚蠢,但是您是否检查过您是否在使用与问题中所指相同的bootstrap-datetimepicker.js插件?

我知道有两个版本非常相似:

  1. 您在问题中提供的版本:[http://eonasdan.github.io/bootstrap-datetimepicker/]
  2. 稍有不同的版本:[http://www.eyecon.ro/bootstrap-datepicker/]

第一个版本响应bootstrap-datetimepicker.js,而第二个版本响应dp.change

只需查看bootstrap-datetimepicker.js顶部的注释,即可查看正在使用的注释。

itsmejodie answered 2020-08-11T09:02:12Z
6 votes

在加载datetimepicker.js之前检查是否正在加载moment.js

da Rocha Pires answered 2020-08-11T09:02:32Z
2 votes

Tempus Dominus(自定义为非常流行的Eonasdan / bootstrap-datetimepicker的继承者)似乎已将事件更改为change.datetimepicker。

glerendegui answered 2020-08-11T09:02:52Z
0 votes

我正在使用引导日期时间选择器。 经过大量研究,以下代码对我有用:

$('.data_date_of_birth').on('changeDate', function(event) {
  alert($(this).val());
});
Kamlesh answered 2020-08-11T09:03:13Z
translate from https://stackoverflow.com:/questions/22500662/bootstrap-3-datetimepicker-events-not-firing-up