layui使用layDate實現(xiàn)時間設(shè)置功能

這篇文章將為大家詳細講解有關(guān)layui使用layDate實現(xiàn)時間設(shè)置功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

laydate目前實現(xiàn)的一些功能：

1、支持一次性render多個節(jié)點。

2、支持render一個已經(jīng)render過的節(jié)點。

3、新增lay-data屬性來設(shè)置當前節(jié)點的laydate的配置。

4、實現(xiàn)快速選擇時間的功能。（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。

先上效果：

實現(xiàn)思路：

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

2、內(nèi)部邏輯比較散，基本就是在initDate的時候檢測到多選，用配置的分隔符分隔值，然后渲染的時候稍微修改一下邏輯，不然以前默認的選中值的date一樣的，而是根據(jù)實際的值域去圈定。

然后處理的就是事件，點擊一個日期，觸發(fā)內(nèi)部的choose，區(qū)分多選還是單選，多選要看是選中還是取消選中，然后把值記錄起來，如果是單選，那還是跟之前一樣的邏輯不變；最后就是parse根據(jù)laydate實例生成一個值的字符串了，如果是多選就選中的那些值sort一下用分隔符給join起來給綁定的節(jié)點。

3、使用：

默認長方形的效果：

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

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

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

但是實際抓住重點就好辦了，銷毀的另外一種形式就是讓這個節(jié)點重生，最終要的效果就是原先的laydate的實例已經(jīng)跟當前這個節(jié)點沒有關(guān)系了，不認識了就行了。

實現(xiàn)方法：

實際可以看到最核心的其實就是圈中的這兩句代碼，將要銷毀的節(jié)點給clone一下然后把原始的節(jié)點給替換了，這樣子對于用戶來說基本就是一次無感的過程，記得把lay-key去掉，這樣子基本就是一個干凈的節(jié)點了，后面要渲染成啥樣子的就自由發(fā)揮了。

layui是一款采用自身模塊規(guī)范編寫的前端UI框架,遵循原生HTML/CSS/JS的書寫與組織形式,門檻極低,拿來即用。平常我們經(jīng)常用到的表單排版方式常見的有兩種，layui文檔中已經(jīng)給出垂直的排版方式，我們做后臺的時候也會用到水平排版方式,用于在頁面的頂部進行搜索的時候用到。

關(guān)于layui使用layDate實現(xiàn)時間設(shè)置功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。