laydate.js时间控件 开始时间与结束时间最大最小值范围代码

在日常的网页开发过程中，日期组件已经成为不可或缺的组件之一。随着广大杰出攻城狮的不懈努力，也出现了很多优秀的日期组件，其中我个人觉得 layDate 日期组件是一个非常不错的组件，简洁易用，样式清爽。 laydate 日期组件相信很多前端开发人也都不陌生，而我在最近项目中也用到了它，虽然 layDate 大部分功能都满足，但是也有一些需要完善的东西，所以特别整理一下，为需要的小伙伴提供帮助，要求

1. 选择开始时间后，点击结束时间必须大于开始时间；
2. 如果先选择结束时间，开始时间必须小于结束时间；

代码如下：

// 开始时间
var start = laydate.render({
    elem: '#startTime',
    theme: 'molv',
    trigger: 'click',
    //采用 click 弹出
    done: function(value, date, endDate) {
        end.config.min = {
            year: date.year,
            month: date.month - 1,
            date: date.date,
            hours: date.hours,
            minutes: date.minutes,
            seconds: date.seconds
        }; //开始日选好后，重置结束日的最小日期
        end.config.value = {
            year: date.year,
            month: date.month - 1,
            date: date.date,
            hours: date.hours,
            minutes: date.minutes,
            seconds: date.seconds
        }; //将结束日的初始值设定为开始日
    }
});
// 结束时间
var end = laydate.render({
    elem: '#endTime',
    theme: 'molv',
    trigger: 'click',
    //采用 click 弹出
    done: function(value, date, endDate) {
        start.config.max = {
            year: date.year,
            month: date.month - 1,
            date: date.date,
            hours: date.hours,
            minutes: date.minutes,
            seconds: date.seconds
        }; //结束日选好后，重置开始日的最大日期
    }
});

2021/1/12 补充：

今天在测试的时候发现一个问题，就是在编辑时间时，完成时间可以早于开始时间，开始时间也会晚于完成时间，这显然是不对的，优化后的代码如下：

// 开始时间
var start = laydate.render({
    elem: '#startTime',
    theme: 'molv',
    trigger: 'click',
    //采用 click 弹出
    done: function(value, date, endDate) {
        end.config.min = {
            year: date.year,
            month: date.month - 1,
            date: date.date,
            hours: date.hours,
            minutes: date.minutes,
            seconds: date.seconds
        }; //开始日选好后，重置结束日的最小日期
        end.config.value = {
            year: date.year,
            month: date.month - 1,
            date: date.date,
            hours: date.hours,
            minutes: date.minutes,
            seconds: date.seconds
        }; //将结束日的初始值设定为开始日
        var startDate = new Date(value).getTime();
        var endTime = new Date($('#endTime').val()).getTime();
        if (endTime < startDate) {
            layer.msg('计划立项时间不能晚于计划结项时间!', {
                time: 1500
            });
            $('#startTime').val($('#endTime').val());
            return false;
        }
    }
});
// 结束时间
var end = laydate.render({
    elem: '#endTime',
    theme: 'molv',
    trigger: 'click',
    //采用 click 弹出
    done: function(value, date, endDate) {
        start.config.max = {
            year: date.year,
            month: date.month - 1,
            date: date.date,
            hours: date.hours,
            minutes: date.minutes,
            seconds: date.seconds
        }; //结束日选好后，重置开始日的最大日期
        var startDate = new Date(value).getTime();
        var endTime = new Date($('#startTime').val()).getTime();
        if (endTime < startDate) {
            layer.msg('计划立项时间不能晚于计划结项时间!', {
                time: 1500
            });
            $('#endTime').val($('#startTime').val());
            return false;
        }
    }
});