Bootstrap 3 datetimepicker 事件未触发

Posted 2023-02-22

【中文标题】Bootstrap 3 datetimepicker 事件未触发

【英文标题】：Bootstrap 3 datetimepicker events not firing up

【发布时间】：2014-04-25 09:23:04

【问题描述】：

我正在使用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>

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

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

【问题讨论】：

你能把你的插件放在里面吗？

我尝试制作小提琴，但无法为其添加引导功能？

你的骨架曾经存在过：jsfiddle.net/brainbolt/52VtD/4

【参考方案1】：

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

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

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

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

只需检查 bootstrap-datetimepicker.js 顶部的 cmets 即可查看您使用的是哪一个。

【讨论】：

我遇到了同样的问题，我正在使用来自 eonasdan 的插件。 change.dp 或 dp.change 都没有触发。

没关系。我的脚本顺序错误。似乎这两个事件都在起作用。这里。 jsfiddle.net/QM8eC/4

for change.dp 我收到一个错误 undefined is not a function for setMaxDate，而 dp.change 不起作用。怎么会？

这一直困扰着我上一个项目。感谢您的简洁提醒！

还有另一个分支 smalot/bootstrap-datetimepicker 也使用 change.dp。

【参考方案2】：

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

【参考方案3】：

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

【讨论】：

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

【参考方案4】：

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

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