最近用到了bootstrap-datetimepicker日历插件(https://github.com/smalot/bootstrap-datetimepicker ),我写了两个日期选择框(登录开始时间和登录结束时间),即:
<div class="form-group required col-md-4">
<label class="col-md-4 control-label">开始时间:</label>
<div class="col-md-8 input-group date form_date loginStartTime-box">
<input type="text" class="form-control" name="loginStartTime" />
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<div class="form-group required col-md-4">
<label class="col-md-4 control-label">结束时间:</label>
<div class="col-md-8 input-group date form_date loginEndTime-box">
<input type="text" class="form-control" name="loginEndTime" />
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
相关的js代码为:
$('.form_date').datetimepicker({
language: 'zh-CN',
format: 'yyyy-mm-dd',
minView: 2,
weekStart: 0, //一周从哪一天开始
todayBtn: 1, //
todayHighlight: 1,
showMeridian: 1,
autoclose: 1
});
$(".loginStartTime-box").datetimepicker().on("changeDate", function (e) {
$(".loginEndTime-box").datetimepicker('setStartDate', e.date);
});
$(".loginEndTime-box").datetimepicker().on("changeDate", function (e) {
$(".loginStartTime-box").datetimepicker('setEndDate', e.date);
});
$('.form_date').find("input").focus(function () {
// 获得焦点后立即失去焦点,达到禁用手动输入日期的目的
$(this).blur();
});
正常情况下,选择登录开始时间后确实是能够限制登录结束时间的最小日期,选择登录结束时间也能限制登录开始时间的最大日期。
但是后来我发现一个问题,点击remove图标清空日期的时候,没有把startDate和endDate的限制清除,我在changeDate事件处理方法中打印了下e.date的值,结果发现点击remove图标后,打印了null,也就是说,此时e.date的值是null,而按照官网上的文档
$(".loginEndTime-box").datetimepicker('setStartDate', null);
是可以取消startDate的限制的,开始我怀疑自己哪里配置错了,但是我看了好几次文档说明都是这样写的,然后我就去看了下这个插件的js文件,发现有如下代码:
setStartDate: function (startDate) {
this.startDate = startDate || this.startDate ;
……
},
它这个判断了下,如果传入的startDate为空,则使用this.startDate,而这个this.startDate是在哪里定义的呢,我找了下,发现在这里:
this.startDate = new Date(-8639968443048000);
this.endDate = new Date(8639968443048000);
我还发现,初始化日历插件的时候也会去调用setStartDate(即使你没在配置文件中设置startDate),也就是说startDate 和endDate 有默认的初始值,我们说的清除startDate和endDate限制其实就是让它们回到初始值,但是为什么setStartDate传入null之后没有回到初始值呢,因为此时this.startDate已经不是初始值了,而是你清空之前选择的值。发现了问题就好办,要解决这个问题,只需要两步就可以了
第一、用新的变量定义startDate和endDate的初始值
this.initStartDate = new Date(-8639968443048000);
this.initEndDate = new Date(8639968443048000);
this.startDate = new Date(-8639968443048000);
this.endDate = new Date(8639968443048000);
第二、修改setStartDate和setEndDate方法,以setStartDate为例,改为:
setStartDate: function (startDate) {
this.startDate = startDate || this.initStartDate;
……
},
改完之后重新试一下,你会发现问题已经解决了。