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新增「日期多選」和「銷毀方法」詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！