44

我正在使用Bootstrap 3 DateTimePicker ，我正在尝试示例 8（链接的 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>

日历正在根据需要显示，但 dp.change、dp.hide、dp.show 等事件没有启动。可能是什么问题？有什么帮助吗？

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

4

4 回答 4

60

这可能看起来很愚蠢，但是您是否检查过您使用的bootstrap-datetimepicker.js插件与您在问题中所指的插件相同？

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

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

第一个版本响应change.dp，而第二个版本响应dp.change。

只需检查顶部的评论，bootstrap-datetimepicker.js看看您使用的是哪一个。

于 2014-04-03T04:38:20.650 回答
6

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

于 2014-03-24T16:57:21.680 回答
4

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

于 2018-08-17T19:56:03.507 回答
0

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

$('.data_date_of_birth').on('changeDate', function(event) {
  alert($(this).val());
});
于 2019-07-23T06:04:53.640 回答