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;
        }
    }
});
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » laydate.js时间控件 开始时间与结束时间最大最小值范围代码

发表评论

提供最优质的资源集合

立即查看 了解详情