javascript - Bootstrap 3 datetimepicker 事件没有启动

标签 javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-datetimepicker

我正在使用 Bootstrap 3 DateTimePicker我正在尝试示例 8(链接的日期时间选择器)。

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

最佳答案

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

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

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

第一个版本响应change.dp,第二个版本响应dp.change

只需检查 bootstrap-datetimepicker.js 顶部的注释即可了解您使用的是哪一个。

关于javascript - Bootstrap 3 datetimepicker 事件没有启动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22500662/

相关文章:

javascript - 为什么这是指外部变量?

javascript - 为什么在我的 Bootstrap Tour 过程中所选元素并不总是弹出?

javascript - 过滤条件下划线

javascript - 将 textExtraction 与 jQuery 表排序器一起使用时出现问题

javascript - 本地化和 JQuery/JavaScript

css - Twitter-Bootstrap 3 网格布局重叠

javascript - 自定义悬停标签,如 Thinglink

javascript - 如何区分移动版 Google Maps JS API v3 中的点击和拖动?

javascript - 从导航后面滑出文本

css - 无法让 Bootstrap 网格在 Rails 应用程序中工作