- 首页
- 前端开发
- Bootstrap 3 datetimepicker 事件没有启动
Bootstrap 3 datetimepicker 事件没有启动
[英] Bootstrap 3 datetimepicker events not firing up
本文介绍了Bootstrap 3 datetimepicker 事件没有启动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Bootstrap 3 DateTimePicker 我正在尝试示例 8(链接日期时间选择器).
$('#dpStart').datetimepicker({pickDate: true,//en/禁用日期选择器选择时间:假，格式:DD-MM-YYYY"，useMinutes: false,//en/禁用分钟选择器useSeconds: 假});$('#dpEnd').datetimepicker({pickDate: true,//en/禁用日期选择器选择时间:假，格式:DD-MM-YYYY"，useMinutes: false,//en/禁用分钟选择器useSeconds: 假});$("#dpStart").on("dp.change", function(e) {警报('嘿')；$('#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">开始日期-时间</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 class="col-md-6 col-sm-6 form-group"><label for="txtEndDate">结束日期-时间</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>
Calender 根据需要显示，但 dp.change、dp.hide、dp.show 等事件没有启动.. 可能是什么问题?有什么帮助吗?
请注意，我已经包含了所有必要的文件，如 Bootstrap js、bootstrap css、Moment.js 和 datetimepicker js 和 css 文件.
解决方案
这可能看起来很傻，但是您是否检查过是否使用了与您所指的相同的 bootstrap-datetimepicker.js 插件在你的问题中?
我知道有两个版本非常相似:
- 您在问题中提供的版本:http://eonasdan.github.io/bootstrap-datetimepicker/
- 略有不同的版本:http://www.eyecon.ro/bootstrap-datepicker/
第一个版本响应change.dp，第二个版本响应dp.change.
只需查看 bootstrap-datetimepicker.js 顶部的注释即可了解您使用的是哪一个.
I am using Bootstrap 3 DateTimePicker and I am trying example 8 (Linked 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 is showing as per the needs but the events like dp.change, dp.hide, dp.show are not firing up.. What could be the problem? Any help?
EDIT:
Please note that I've included all necessary files like Bootstrap js, bootstrap css, Moment.js and datetimepicker js and css files.
解决方案
This may seem silly, but did you check you're using the same bootstrap-datetimepicker.js plugin that you're referring to in your question?
There are two versions I know of which are very similar:
- The version you provided in your question: http://eonasdan.github.io/bootstrap-datetimepicker/
- A slightly different version: http://www.eyecon.ro/bootstrap-datepicker/
The first version responds to change.dp, while the second version responds to dp.change.
Just check the comments at the top of the bootstrap-datetimepicker.js to see which one you're using.
这篇关于Bootstrap 3 datetimepicker 事件没有启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
