Bootstrap 3日期时间选择器事件无法触发

Question

Bootstrap 3日期时间选择器事件无法触发

javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-datetimepicker

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文件。

- writeToBhuwan

请问您能否在 JSFiddle 上创建一个包含您的插件的示例吗？ - BENARD Patrick

我尝试制作这个小工具，但是我无法为它添加Bootstrap功能。 - writeToBhuwan

你有一个类似于骨架存在的东西，如：http://jsfiddle.net/brainbolt/52VtD/4/。 - BENARD Patrick

4个回答

6

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

- da Rocha Pires

4

Tempus Dominus（自称是非常受欢迎的Eonasdan / bootstrap-datetimepicker的后继者）似乎已经将事件更改为change.datetimepicker。

- glerendegui

谢谢！我以为我在使用eonasdan插件...哈哈 - Aline Matos

0

我正在使用Bootstrap日期时间选择器。经过大量研究，以下代码适用于我：

$('.data_date_of_birth').on('changeDate', function(event) {
  alert($(this).val());
});

- Kamlesh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- itsmejodie · Accepted Answer

这可能看起来很傻，但你检查一下你使用的是与问题中引用的bootstrap-datetimepicker.js插件相同的版本了吗？

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

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

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

只要检查一下bootstrap-datetimepicker.js顶部的注释，就可以看到你正在使用哪个版本。