laydate.js时间控件 开始时间与结束时间最大最小值范围代码
在日常的网页开发过程中,日期组件已经成为不可或缺的组件之一。随着广大杰出攻城狮的不懈努力,也出现了很多优秀的日期组件,其中我个人觉得 layDate 日期组件是一个非常不错的组件,简洁易用,样式清爽。 laydate 日期组件相信很多前端开发人也都不陌生,而我在最近项目中也用到了它,虽然 layDate 大部分功能都满足,但是也有一些需要完善的东西,所以特别整理一下,为需要的小伙伴提供帮助,要求
- 选择开始时间后,点击结束时间必须大于开始时间;
- 如果先选择结束时间,开始时间必须小于结束时间;
代码如下:
// 开始时间 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时间控件 开始时间与结束时间最大最小值范围代码
码云笔记 » laydate.js时间控件 开始时间与结束时间最大最小值范围代码