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;
        }
    }
});

以上关于laydate.js时间控件 开始时间与结束时间最大最小值范围代码的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。