基于Layui的多级联动时间控件(laydate开始时间和结束时间联动,含日期控制)

基于Layui的多级联动时间控件(laydate开始时间和结束时间联动,含日期控制)

0 引言

近期,跟随团队做项目,项目前端基于Layui框架开发,(插一句使用框架真的比自己写原生HTML+CSS舒服多了),项目中有一个时间控件的需求,一般项目常用的就是选取一个时间日期就完了,但是这个项目的时间控件需要考虑开始时间和结束时间的相互联动,即多个(本文是三个时间控件-日期控件、开始时间控件及结束时间控件相互限制,层级联动)。

1 示例

比如,当我选择了当前日期为当天后,开始时间控件的可选时间节点必须是当前时间之后(即当前时间之前不可选了),选取开始时间后需要限制结束时间必须在开始时间之后,本项目需求是结束时间必须必开始时间晚十分钟。

基于Layui的多级联动时间控件(laydate开始时间和结束时间联动,含日期控制)_第1张图片

 

2 需求细化

(1)开始时间和结束时间每天可选的最大最小时间为凌晨1点-23点;

(2)当选取的时间和当天时,开始时间自动调整之后当前时间之后的时间节点可选;

(3)结束时间必须在开始时间后10分钟;

(4)开始和结束时间无需选择秒,分钟单位间隔为10;

(5)当出现开始时间比当天系统时间更小时或结束时间比开始时间更小时需要错误提示;

Tips:以上需求大部分LayUI的时间控件均无法直接满足,需要通过逻辑设计或修改CSS达到

3 实现

3.1 引入基本控件(laydate)

 

Html代码:

   
               
                   
   
   
                
                   
   
   
               
                   
   

Js处理

(Tips:这部分可以参考LayUI文档即可实现,这里只做演示,详细还是见下面完整代码,https://www.layui.com/doc/modules/laydate.html)

  //导入laydate.js脚本响应处理

laydate.render({

elem: '# mDate ' //指定要响应的时间控件id – mDate、mDateStartTime、mDateEndTime

});
 

3.2 实现LayUI分钟间隔10分钟且不可点击秒数

这部分,笔者尝试去查阅了文档,原本以为,layui文档这个需求会提供配置,找了一圈最后还是没有找到,最后只好自己通过“粗暴”的做法实现了这个需求。做法,通过CSS样式的nth-child强制隐藏秒数部分,间隔10分钟也是一样的。

基于Layui的多级联动时间控件(laydate开始时间和结束时间联动,含日期控制)_第2张图片

 

代码如下:(时分宽度各占50%,即把整个控件吃满,同时秒的li设置为隐藏)


3.3 日期和开始结束时间范围限制

日期可选范围:半个月之内可选

开始结束时间:1-23点




                    
                    

你可能感兴趣的:(项目开发日记,Layui)