bootstrap-datetimepicker⽇期控件起始时间和结束时间
项⽬中经常会⽤到起⽌时间，如下图：
需要引⽤以下⼏个⽂件：
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/bootstrap/dist/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="~/lib/bootstrap/dist/js/bootstrap-datetimepicker.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap-datetimepicker.zh-CN.js"></script>
然后，代码中需要初始化⼀下：
$("#sDatePicker").datetimepicker(
{
language: 'zh-CN',
autoclose: true,//选中之后⾃动隐藏⽇期选择框
clearBtn: false,//清除按钮
todayBtn: true,//今⽇按钮
format: 'yyyy-mm-dd',
startView: 2,
minView: 2,
todayHighlight: false,
forceParse: true,
endDate: new Date()
}).on('changeDate', function (ev) {
if (ev.date) {
$("#eDatePicker").datetimepicker('setStartDate', new Date(ev.date.valueOf()))
} else {
$("#eDatePicker").datetimepicker('setStartDate', null);
}
});
$("#eDatePicker").datetimepicker(
{
language: 'zh-CN',
autoclose: true,//选中之后⾃动隐藏⽇期选择框
clearBtn: false,//清除按钮
todayBtn: true,//今⽇按钮
format: 'yyyy-mm-dd',
startView: 2,
minView: 2,
bootstrap项目
todayHighlight: false,
forceParse: true
}).on('changeDate', function (ev) {
if (ev.date) {
$("#sDatePicker").datetimepicker('setEndDate', new Date(ev.date.valueOf()))
} else {
$("#sDatePicker").datetimepicker('setEndDate', new Date());
}
});
初始化代码-js
搞定，⽽且也限制了起始时间不⼤于今天，且不⼤于结束时间。结束时间不⼩于起始时间。
然⽽，在将选择的⽇期删除之后，总是回不到初始状态，⽐如，结束时间选择 3⽉5号，那么开始时间只能选3⽉5号以前，当删除了结束时间（或者点击清空/重置按钮清除已选时间），发现，开始时间依然是只能选择3⽉5号之前的。解决⽅法如下：
修改源码bootstrap-datetimepicker.js，如下⽚段：
setStartDate: function (startDate) {
//this.startDate = startDate || this.startDate;
//传⼊空或null时，恢复默认（为解决清空⽇期后，时间限制恢复不到默认值，例如开始时间仍被限制⼩于上⼀次的结束时间）
this.startDate = startDate || new Date(-8639968443048000);
if (this.startDate.valueOf() !== 8639968443048000) {
this.startDate = DPGlobal.parseDate(this.startDate, this.format, this.language, this.formatType, this.timezone);
}
this.update();
this.updateNavArrows();
},
setEndDate: function (endDate) {
//dDate = endDate || dDate;
//传⼊空或null时，恢复默认（为解决清空⽇期后，时间限制恢复不到默认值，例如开始时间仍被限制⼩于上⼀次的结束时间）dDate = endDate || new Date(8639968443048000);
if (dDate.valueOf() !== 8639968443048000) {
}
this.update();
this.updateNavArrows();
},
源码修改
然后，在清空/重置事件中，增加以下代码：
$("#sDatePicker").datetimepicker('setEndDate', new Date());
$("#eDatePicker").datetimepicker('setStartDate', null);
ok，搞定了；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。