问题复述:日期选择 ,一个时间起始选择框(#startTime),一个结束选择框(#endTime).
要求:
- endTime的值不能小于startTime的值
- startTime的值和endTime的值中间不能大于100天
下面贴代码
// html 代码
<div class="input-daterange input-group">
<input type="text" name="monitorStartTime" id="startTime" class="startTime monitorTime" value="" autocomplete="off"/>
-
<input type="text" name="monitorEndTime" id="endTime" class="endTime monitorTime" value="" autocomplete="off"/>
</div>
// js 代码
// 日期配件初始化
$("#startTime").datetimepicker({
format: 'yyyy-mm-dd hh:ii:ss',
minuteStep:1,
minView:'hour',
language: 'zh-CN',
pickerPosition:'bottom-right',
autoclose:true,
bootcssVer: 3,
endDate : new Date(),// 结束时间默认是系统当前时间
}).on("changeDate",function(e){
var endDays = +e.date+1000 * 60 * 60 * 24 * 100;
var start = endDays> +new Date()? new Date() : new Date(endDays);
// 设置结束日期在100天以内
$("#endTime").datetimepicker("setEndDate",start);
// 开始日期不能在截至日期后面
$("#endTime").datetimepicker("setStartDate",e.date);
});
$("#endTime").datetimepicker({
format: 'yyyy-mm-dd hh:ii:ss',
minuteStep:1,
minView:'hour',
language: 'zh-CN',
autoclose:true,
bootcssVer: 3,// 显示时间箭头
endDate : new Date(),
}).on("changeDate",function(e){
var end =new Date(+e.date-1000 * 60 * 60 * 24 * 100)
$("#startTime").datetimepicker("setEndDate",e.date);
$("#startTime").datetimepicker("setStartDate",end);
});
现在还有一个问题,重置,点击重置按钮,日期选框中内容可以清空,但是选择器不能自由选择,还是上一次选择的范围,原来开始或者结束选择要在原来选定日期的100天范围内.不可以自由选择
$('#btn_resetQuery').on('click',function(){
// 重置表单 内容
$('#monitorQueryForm')[0].reset();
// 时间控件重置
$('#startTime').datetimepicker('setStartDate', '1900-01-01');
$('#endTime').datetimepicker('setEndDate', new Date());
})
}
有错误或者不清楚的欢迎留言指正! _