这个时间控件实现了:
- 开始时间和结束时间都不得超过当前时间
- 结束时间大于开始时间并且小于当前时间
- 开始时间默认时分秒为00 00 00
- 结束时间默认时分秒为23 59 59
- 其他官方自带功能
项目中的需求是, 结束时间要大于开始时间,包括时分秒,开始时间选择的时间范围最大不能超过今天的时间,结束时间的选择依据开始时间的选择,如下代码
layui时间控件封装成一个简单的方法
//此项目时间控件的方法(结束时间大于开始时间,)
//startName 开始时间标签ID
//endName 结束时间标签ID
setTimeControl: function (startName, endName) {
//日期范围
layui.use(['layer','laydate'], function () {
var layer = layui.layer,
laydate = layui.laydate;
var startDate = laydate.render({
elem: startName,
type: 'datetime',
max: utils.getNowFormatDate(), //设置一个默认最大值
ready: function(date){//设置默认值,选择日期不选择时分秒时的默认值
this.dateTime.hours=00;
this.dateTime.minutes=00;
this.dateTime.seconds=00;
},
done: function (value, date) {
var currentDate = new Date();
endDate.config.min = {
year: date.year,
month: date.month - 1, //关键
date: date.date,
hours: date.hours,
minutes: date.minutes,
seconds: date.seconds,
};
}
})
var endDate = laydate.render({
elem: endName, //选择器结束时间
type: 'datetime',
max: utils.getNowFormatDate(), //设置一个默认最大值
ready: function(date){
this.dateTime.hours=23;
this.dateTime.minutes=59;
this.dateTime.seconds=59;
},
done: function (value, date) {
var currentDate = new Date();
startDate.config.max = {
// 此处的三目运算详见下面的附言
year: date.year?date.year:currentDate.getFullYear(),
month: date.month?date.month - 1:currentDate.getMonth(),
date: date.date?date.date:currentDate.getDate(),
hours: date.hours?date.hours:currentDate.getHours(),
minutes: date.minutes?date.minutes:currentDate.getMinutes(),
seconds: date.seconds?date.seconds:currentDate.getSeconds(),
}
$(endName + " ol li:last-child").click()
}
});
});
},
附言:网上有很多朋友的写法没有这个三目运算符, 但是在我的实际项目运用中,发现了一个bug,直接上图
无论开始时间选择或没选择的情况下,有值或无值,我在结束时间里,直接点击了清空,那么,开始时间里面的日期选项会全部是禁用的状态,如果用户正常操作一次性选择日期时间正确的情况下,是没问题的,但是测试同事既然测出来了,作为开发也得改啊,所以就优化了一下