用datetimepicker 时间插件获取日期的时间区间,但在应用过程中发现月份的选择有两个月的时间偏差,比如: 开始时间选择为2017-10,那结束时间的开始时间应该是在2017-10之后,但是视图显示2017年的8、9月份都可选,阅读插件源码有两处错误,一个是650行的月份获取错误;另一个是784行的时间选择器出现错误,错将时间视图中左右两个按钮的span元素放在了月份的span元素中,这样月份元素共有14个,现将正确代码记录下来:
649: endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
650: endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() + 1 : Infinity, // edit
// endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() - 1 : Infinity, //原码
783: var currentYear = this.date.getUTCFullYear();
784: var months = this.setTitle('.datetimepicker-months', year).end().find('.month').removeClass('active');// edit
// var months = this.setTitle('.datetimepicker-months', year).end().find('span').removeClass('active');// 原码
例子如下:
<div class="input-daterange input-group" id="month" >
<input type="text" class="form-control" data-time="start" >
<span class="input-group-addon">至</span>
<input type="text" class="form-control" data-time="end" >
</div>
//月的开始时间
$('#month [data-time="start"]').datetimepicker({
language: 'zh-CN',
todayBtn: false,
autoclose: true,
startView: 3,//默认视图为年视图
minView: 3,
format: 'yyyy-mm',
forceParse: true,
endDate:TodayMonth
}).on("changeDate",function(e){
$('#month [data-time="end"]').datetimepicker("setStartDate",e.date);//根据前端选择的结束时间设置插件可选择的开始时间
}).val(TodayMonth);
//月的结束时间
$('#month [data-time="end"]').datetimepicker({
language: 'zh-CN',
todayBtn: false,
autoclose: true,
startView: 3,
minView: 3,
format: 'yyyy-mm',
forceParse: true,
endDate:TodayMonth
}).on("changeDate",function(e){
$('#month [data-time="start"]').datetimepicker("setEndDate",e.date);//根据前端选择的开始时间设置插件可选择的结束时间
}).val(TodayMonth);
具体其他时间类型的插件可以参考博客地址:
datetimepicker的用法和时间的绑定