當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

027-日期和时间组件

發(fā)布時(shí)間：2025/4/17 编程问答 59 豆豆

生活随笔收集整理的這篇文章主要介紹了 027-日期和时间组件小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. layDate其中主要以: 年選擇器、年月選擇器、日期選擇器、時(shí)間選擇器、日期時(shí)間選擇器五種類型的選擇方式為基本核心, 并且均支持范圍選擇(即雙控件)。內(nèi)置強(qiáng)勁的自定義日期格式解析和合法校正機(jī)制, 含中文版和國際版, 主題簡約卻又不失靈活多樣。由于內(nèi)部采用的是零依賴的原生JavaScript編寫, 因此又可作為獨(dú)立組件使用。

2. 模塊加載名稱: laydate。

3. 基礎(chǔ)參數(shù)選項(xiàng)

3.1. 通過核心方法: laydate.render(options)來設(shè)置基礎(chǔ)參數(shù)。也可以通過方法: laydate.set(options)來設(shè)定全局基礎(chǔ)參數(shù)。

4. elem - 綁定元素

4.1. 類型: String/DOM, 默認(rèn)值: 無。

4.2. 必填項(xiàng), 用于綁定執(zhí)行日期渲染的元素, 值一般為選擇器或DOM對象。

5. 作為獨(dú)立組件使用

5.1. 下載layDate獨(dú)立版本組件包:

5.2. 引入laydate.js之后即可調(diào)用方法

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>使用layDate獨(dú)立版</title></head><body><input type="text" placeholder="請選擇日期" id="test1"><script type="text/javascript" src="layDate-v5.0.9/laydate/laydate.js"></script><script type="text/javascript">// 執(zhí)行一個(gè)laydate實(shí)例laydate.render({elem: '#test1' // 指定元素});</script></body> </html>

5.3. 效果圖

6. type - 控件選擇類型

6.1. 類型: String, 默認(rèn)值: date。

6.2. 用于單獨(dú)提供不同的選擇器類型, 可選值如下表:

6.3. 實(shí)例

7. range - 開啟左右面板范圍選擇

7.1. 類型: Boolean/String, 默認(rèn)值: false。

7.2. 如果設(shè)置true, 將默認(rèn)采用"-"分割。你也可以直接設(shè)置分割字符。五種選擇器類型均支持左右面板的范圍選擇。

8. format - 自定義格式

8.1. 類型: String, 默認(rèn)值: yyyy-MM-dd。

8.2. 通過日期時(shí)間各自的格式符和長度, 來設(shè)定一個(gè)你所需要的日期格式。layDate支持的格式如下:

8.3. 通過上述不同的格式符組合成一段日期時(shí)間字符串, 可任意排版, 如下所示:

8.4. 實(shí)例

9. value - 初始值

9.1. 類型: String, 默認(rèn)值: new Date()。

9.2. 支持傳入符合format參數(shù)設(shè)定的日期格式字符, 或者new Date()。

10. isInitValue - 初始值填充

10.1. 類型: Boolean, 默認(rèn)值: true。

10.2. 用于控制是否自動(dòng)向元素填充初始值(需配合value參數(shù)使用)。

11. min/max - 最小/大范圍內(nèi)的日期時(shí)間值

11.1. 類型: string, 默認(rèn)值: min: '1900-1-1'、max: '2099-12-31'。

11.2. 設(shè)定有限范圍內(nèi)的日期或時(shí)間值, 不在范圍內(nèi)的將不可選中。這兩個(gè)參數(shù)的賦值非常靈活, 主要有以下幾種情況:

12. trigger - 自定義彈出控件的事件

12.1. 類型: String, 默認(rèn)值: focus。

12.2. 如果綁定的元素非輸入框, 則默認(rèn)事件為: click。

13. show - 默認(rèn)顯示

13.1. 類型: Boolean, 默認(rèn)值: false。

13.2. 如果設(shè)置: true, 則控件默認(rèn)顯示在綁定元素的區(qū)域。通常用于外部事件調(diào)用控件。

14. position - 定位方式

14.1. 類型: String, 默認(rèn)值: absolute。

14.2. 用于設(shè)定控件的定位方式, 有以下三種可選值:

15. zIndex - 層疊順序

15.1. 類型: Number, 默認(rèn)值: 66666666。

15.2. 一般用于解決與其它元素的互相被遮掩的問題。如果position參數(shù)設(shè)為static時(shí), 該參數(shù)無效。

16. showBottom - 是否顯示底部欄

16.1. 類型: Boolean, 默認(rèn)值: true。

16.2. 如果設(shè)置false, 將不會(huì)顯示控件的底部欄區(qū)域。

17. btns - 工具按鈕

17.1. 類型: Array, 默認(rèn)值: ['clear', 'now', 'confirm']。

17.2. 右下角顯示的按鈕, 會(huì)按照數(shù)組順序排列, 內(nèi)置可識(shí)別的值有: clear、now、confirm。

18. lang - 語言

18.1. 類型: String, 默認(rèn)值: cn。

18.2. 我們內(nèi)置了兩種語言版本: cn(中文版)、en(國際版, 即英文版)。

19. theme - 主題

19.1. 類型: String, 默認(rèn)值: default。

19.2. theme的可選值有: default(默認(rèn)簡約)、molv(墨綠背景)、grid(格子主題)。

19.3. 另外, 你還可以傳入其它字符, 如: theme: 'xxx', 那么控件將會(huì)多出一個(gè)class="laydate-theme-xxx"的CSS類, 以便于你單獨(dú)定制主題。

20. calendar - 是否顯示公歷節(jié)日

20.1. 類型: Boolean, 默認(rèn)值: false。

20.2. layui內(nèi)置了一些我國通用的公歷重要節(jié)日, 通過設(shè)置true來開啟。國際版不會(huì)顯示。

21. mark - 標(biāo)注重要日子

21.1. 類型: Object, 默認(rèn)值: 無。

21.2.?calendar參數(shù)所代表的公歷節(jié)日更多情況下是一個(gè)擺設(shè)。因此, 我們還需要自定義標(biāo)注重要日子, 比如: 結(jié)婚紀(jì)念日?日程表等?它分為以下兩種:

22. 控件初始打開的回調(diào)-ready

22.1. 控件在打開時(shí)觸發(fā), 回調(diào)返回一個(gè)參數(shù): 初始的日期時(shí)間對象。

ready: function(date){console.log(date); }

23. 日期時(shí)間被切換后的回調(diào)-change

23.1. 年月日時(shí)間被切換時(shí)都會(huì)觸發(fā)。回調(diào)返回三個(gè)參數(shù), 分別代表: 生成的值、日期時(shí)間對象、結(jié)束的日期時(shí)間對象。

change: function(value, date, endDate){console.log(value, date, endDate); }

24. 控件選擇完畢后的回調(diào)-done

24.1. 點(diǎn)擊日期、清空、現(xiàn)在、確定均會(huì)觸發(fā)。回調(diào)返回三個(gè)參數(shù), 分別代表: 生成的值、日期時(shí)間對象、結(jié)束的日期時(shí)間對象。

done: function(value, date, endDate){console.log(value, date, endDate); }

25. 彈出控件提示

25.1. 事實(shí)上, 執(zhí)行核心方法laydate.render(options)會(huì)返回一個(gè)當(dāng)前實(shí)例對象。其中包含一些成員屬性和方法, 比如: hint方法。

var ins = laydate.render({elem: '#test21',type: 'datetime',change: function(value, date, endDate){ins.hint(value); // 在控件上彈出value值console.log(value, date, endDate);} });

26. 其它方法

27. 例子

27.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>日期模塊 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><big>年選擇器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test1"></div><big>年月選擇器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test2"></div><big>日期選擇器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test3"></div><big>時(shí)間選擇器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test4"></div><big>日期時(shí)間選擇器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test5"></div><br /><br /><big>年范圍選擇器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test6"></div><big>年月范圍選擇器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test7"></div><big>日期范圍選擇器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test8"></div><big>時(shí)間范圍選擇器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test9"></div><big>日期時(shí)間范圍選擇器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test10"></div><br /><br /><big>年格式化:</big><div class="layui-inline"><input type="text" class="layui-input" id="test11"></div><big>年月格式化:</big><div class="layui-inline"><input type="text" class="layui-input" id="test12"></div><big>日期格式化:</big><div class="layui-inline"><input type="text" class="layui-input" id="test13"></div><big>時(shí)間格式化:</big><div class="layui-inline"><input type="text" class="layui-input" id="test14"></div><big>日期時(shí)間格式化:</big><div class="layui-inline"><input type="text" class="layui-input" id="test15"></div><br /><br /><big>墨綠主題:</big><div class="layui-inline"><input type="text" class="layui-input" id="test16"></div><big>自定義顏色背景:</big><div class="layui-inline"><input type="text" class="layui-input" id="test17"></div><big>格子主題:</big><div class="layui-inline"><input type="text" class="layui-input" id="test18"></div><br /><br /><big>定位fixed:</big><div class="layui-inline"><input type="text" class="layui-input" id="test19"></div><br /><br /><h2>直接嵌套在指定容器中:</h2><div class="layui-block" id="test20"></div><br /><br /><big>標(biāo)注重要日子:</big><div class="layui-inline"><input type="text" class="layui-input" id="test21"></div><br /><br /><h2>獲取某年某月的最后一天:</h2><div style="width: 300px; height: 100px; background: pink;" class="layui-inline" id="test22"></div><br /><br /><h2>獲取當(dāng)前年某月的最后一天:</h2><div style="width: 300px; height: 200px; background: green;" class="layui-inline" id="test23"></div><script type="text/javascript">layui.use(['laydate', 'jquery'], function(){var laydate = layui.laydate,$ = layui.jquery;// 年選擇器laydate.render({elem: '#test1',type: 'year'});// 年月選擇器laydate.render({elem: '#test2',type: 'month'}); // 日期選擇器laydate.render({elem: '#test3',type: 'date' // 默認(rèn), 可不填,min: -7,max: 7});// 時(shí)間選擇器laydate.render({elem: '#test4',type: 'time'});// 日期時(shí)間選擇器laydate.render({elem: '#test5',type: 'datetime',min: '2021-1-1 00:00:00',max: '2021-12-31 23:59:59'});// 年范圍選擇器laydate.render({elem: '#test6',type: 'year',range: true});// 年月范圍選擇器laydate.render({elem: '#test7',type: 'month',range: '~'}); // 日期范圍選擇器laydate.render({elem: '#test8',type: 'date' // 默認(rèn), 可不填,range: '~',min: (new Date()).getTime() - 86400000 * 10,max: (new Date()).getTime() + 86400000 * 10});// 時(shí)間范圍選擇器laydate.render({elem: '#test9',type: 'time',range: true});// 日期時(shí)間范圍選擇器laydate.render({elem: '#test10',type: 'datetime',range: '~'});// 年格式化laydate.render({elem: '#test11',type: 'year',format: 'yyyy年',value: new Date(),isInitValue: true});// 年月格式化laydate.render({elem: '#test12',type: 'month',format: 'yyyy年MM月',value: new Date(),isInitValue: true}); // 日期格式化laydate.render({elem: '#test13',type: 'date' // 默認(rèn), 可不填,format: 'yyyy年MM月dd日',value: new Date(),isInitValue: true});// 時(shí)間格式化laydate.render({elem: '#test14',type: 'time',format: '北京時(shí)間: HH時(shí)mm分ss秒',value: new Date(),isInitValue: true});// 日期時(shí)間格式化laydate.render({elem: '#test15',type: 'datetime',format: 'yyyy年MM月dd日 HH時(shí)mm分ss秒',value: new Date(),isInitValue: true});// 墨綠主題laydate.render({elem: '#test16',type: 'year',theme: 'molv',lang: 'en',trigger: 'focus'});// 自定義顏色背景l(fā)aydate.render({elem: '#test17',type: 'month',theme: '#393D49',lang: 'en',showBottom: false}); // 格子主題laydate.render({elem: '#test18',type: 'date' // 默認(rèn), 可不填,theme: 'grid',lang: 'en',showBottom: false});laydate.render({elem: '#test19',type: 'time',position: 'fixed'});// 直接嵌套在指定容器中l(wèi)aydate.render({elem: '#test20',type: 'datetime',position: 'static',calendar: true});// 標(biāo)記重要日子var ins = laydate.render({elem: '#test21',type: 'datetime',mark: { '0-8-15': '中秋節(jié)' // 0即代表每一年,'0-0-28': '爬山' // 0-0即代表每年每月,'2020-1-1': '結(jié)婚'} ,ready: function(date){console.log(date);},change: function(value, date, endDate){ins.hint(value); // 在控件上彈出value值console.log(value, date, endDate);},done: function(value, date, endDate){console.log(value, date, endDate);}});$('#test22').text('今年2月有' + laydate.getEndDate(2) + '天');$('#test23').text('2020年2月有' + laydate.getEndDate(2, 2020) + '天');});</script></body> </html>

27.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的027-日期和时间组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。