layui 时间选择器laydate开始时间结束时间限制,及设置默认时分秒

这个时间控件实现了:

1. 开始时间和结束时间都不得超过当前时间
2. 结束时间大于开始时间并且小于当前时间
3. 开始时间默认时分秒为00 00 00
4. 结束时间默认时分秒为23 59 59
5. 其他官方自带功能

项目中的需求是, 结束时间要大于开始时间,包括时分秒,开始时间选择的时间范围最大不能超过今天的时间,结束时间的选择依据开始时间的选择,如下代码

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,直接上图

无论开始时间选择或没选择的情况下,有值或无值,我在结束时间里,直接点击了清空,那么,开始时间里面的日期选项会全部是禁用的状态,如果用户正常操作一次性选择日期时间正确的情况下,是没问题的,但是测试同事既然测出来了,作为开发也得改啊,所以就优化了一下