【WEB前端开辟】layDate新增“日期多选”和“烧毁要领”细致引见

laydate现在完成的一些功用:

1、支撑一次性render多个节点。

2、支撑render一个已render过的节点。

3、新增lay-data属性来设置当前节点的laydate的设置。

4、完成疾速挑选时刻的功用。(quickSelect)

5、纯月份年份点击直接肯定。(quickConfirm)

6、不完整的时分秒挑选。(simpleModel & format)

7、破裂式时刻局限挑选。(rangeType & range)

8、新增疾速挑选的两种场景支撑。(range & quickSelect)

9、新增季度挑选(type:'quarter')

10、新增能够定义周n作为一周的最先(weekStart)

11、支撑this标记的背景为圆圈(circleMark)

*新增

12、日期挑选多选(multiple)

13、烧毁laydate(laydatePro.destory)

测试页面: https://sun_zoro.gitee.io/laydatepro/testLaydate.html

日期挑选多选支撑:

现在的多选只支撑date范例的,个人以为其他的应当没有什么运用场景,特别是时刻挑选或许datetime等基础都是没什么用的,而且跟laydate配合起来的话就更不好弄了,由于时刻挑选三列时分秒还要做多选,那得是什么情势什么结果~所以现在只斟酌支撑date的,而且不支撑range。

先上结果:

完成思绪:

1、起首照样新增一个参数(multiple)决议是不是要多选,固然了,不是设置了就肯定能够,上面说了,只支撑非range的日期挑选,不过设置错了也没事,插件内部做了处置惩罚,只要满足前提了才会有结果,不满足就照样单选。

2、内部逻辑比较散,基础就是在initDate的时刻检测到多选,用设置的分开符分开值,然后衬着的时刻轻微修正一下逻辑,不然之前默许的选中值的date一样的,而是依据现实的值域去圈定。

然后处置惩罚的就是事宜,点击一个日期,触发内部的choose,辨别多选照样单选,多选要看是选中照样作废选中,然后把值纪录起来,假如是单选,那照样跟之前一样的逻辑稳定;末了就是parse依据laydate实例生成一个值的字符串了,假如是多选就选中的那些值sort一下用分开符给join起来给绑定的节点。

3、运用:

默许长方形的结果:

新增一个laydate烧毁的小功用laydatePro.destroy('.laydate-test-area');

这个需求近来也看过两三回,重要照样在一些场所比方须要切换已衬着的节点的范例,或许有越发直接的就是衬着以后不想要让它作为laydate了,愿望点了不要再弹出来,诸如这些。

起首前面的状况要修正他的范例或许修正他的一些属性,这个假如之前看过我laydatePro的其他帖子应当就晓得,现在laydate没办法那末轻易能够向table那模样reload之类的,那末也就想起要不就给烧毁本来的从新render一下。

然则现实捉住重点就好办了,烧毁的别的一种情势就是让这个节点重生,终究要的结果就是本来的laydate的实例已跟当前这个节点没有关系了,不认识了就好了。

完成要领:

现实能够看到最中心的实在就是圈中的这两句代码,将要烧毁的节点给clone一下然后把原始的节点给替换了,这模样关于用户来讲基础就是一次无感的历程,记得把lay-key去掉,这模样基础就是一个清洁的节点了,背面要衬着成啥模样的就自由发挥了。

引荐:layui框架疾速入门

以上就是layDate新增“日期多选”和“烧毁要领”细致引见的细致内容,更多请关注ki4网别的相干文章!

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注