首頁 > web前端 > Layui教程 > layDate新增「日期多選」和「銷毀方法」詳細介紹

layDate新增「日期多選」和「銷毀方法」詳細介紹

發布: 2019-11-23 15:14:15
原創
7826 人瀏覽過

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。

先上效果:

layDate新增「日期多選」和「銷毀方法」詳細介紹

實作想法:

1、首先或新增一個參數(multiple)決定是否要多選,當然了,不是設定了就一定可以,上面說了,只支援非range的日期選擇,不過設定錯了也沒事,插件內部做了處理,只有滿足條件了才會有效果,不滿足就還是單選。

2、內部邏輯比較散,基本上就是在initDate的時候偵測到多選,用配置的分隔符號分隔值,然後渲染的時候稍微修改一下邏輯,不然以前預設的選取值的date一樣的,而是根據實際的值域去圈定。

然後處理的就是事件,點擊一個日期,觸發內部的choose,區分多選還是單選,多選要看是選中還是取消選中,然後把值記錄起來,如果是單選,那還是跟之前一樣的邏輯不變;最後就是parse根據laydate實例產生一個值的字串了,如果是多選就選中的那些值sort一下用分隔符號給join起來給綁定的節點。

3、使用:

layDate新增「日期多選」和「銷毀方法」詳細介紹預設長方形的效果:

layDate新增「日期多選」和「銷毀方法」詳細介紹

新增一個laydate銷毀的小功能laydatePro.destroy('.laydate-test-area');

這個需求最近也看過兩三回,主要還是在一些場合比如需要切換已經渲染的節點的類型,或者有更直接的就是渲染之後不想要讓它作為laydate了,希望點了不要再彈出來,諸如這些。

首先前面的情況要修改他的類型或修改他的一些屬性,這個如果之前看過我laydatePro的其他貼文應該就知道,目前laydate沒辦法那麼容易可以向table那樣子reload之類的,那麼也就想起要不就給銷毀原先的重新render一下。

但是實際抓住重點就好辦了,銷毀的另外一種形式就是讓這個節點重生,最終要的效果就是原先的laydate的實例已經跟當前這個節點沒有關係了,不認識了就行了。

實作方法:

layDate新增「日期多選」和「銷毀方法」詳細介紹

實際上可以看到最核心的其實就是圈中的這兩句程式碼,將要銷毀的節點給clone一下然後把原始的節點給替換了,這樣子對使用者來說基本上就是一次無感的過程,記得把lay-key去掉,這樣子基本上就是一個乾淨的節點了,後面要渲染成啥樣子的就自由發揮了。

layDate新增「日期多選」和「銷毀方法」詳細介紹

推薦:layui框架快速入門

#

以上是layDate新增「日期多選」和「銷毀方法」詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:layui.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板