layui 日期時間選擇

2021-10-07 14:10:15 字數 2850 閱讀 9116

年選擇器

年月選擇器

時間選擇器

日期加時間選擇器

可能會出現的bug解決

在看案例之前,先來看一下日期選擇器的引數有哪些:

elem - 繫結元素:

這個是必填項

用於繫結執行日期渲染的元素,值一般為選擇器,或dom物件

type - 控制項選擇型別

用於單獨提供不同的選擇器型別,可選值有如下

type可選值

名稱用途

year

年選擇器

提供年列表選擇

month

年月選擇器

提供年、月選擇

date

日期選擇器

可選擇:年、月、日。type預設值,一般可不填

time

時間選擇器

只提供時、分、秒選擇

datetime

日期時間選擇器

可選擇:年、月、日、時、分、秒

format - 自定義格式

js檔案

因為是基本選擇器,所以不需要特別去寫type為date,預設的本就為date。

layui.use('laydate', function());

});

jsp頁面

像上面這樣單獨寫的話,會是佔據頁面的100%的長度,如果不需要這麼長的話,可以使用下面這種。

用乙個div包起來,這樣就可以控制它的大小。

普通選擇器

js檔案

年選擇器需要設定type為year型別,就是年。

layui.use('laydate', function());

});

jsp頁面

jsp頁面跟上面一樣,像上面這樣單獨寫的話,會是佔據頁面的100%的長度,如果不需要這麼長的話,可以使用下面這種。

用乙個div包起來,這樣就可以控制它的大小。

年選擇器

js檔案

年選擇器需要設定type為month型別

layui.use('laydate', function());

});

jsp頁面

jsp頁面跟上面一樣,像上面這樣單獨寫的話,會是佔據頁面的100%的長度,如果不需要這麼長的話,可以使用下面這種。

用乙個div包起來,這樣就可以控制它的大小。

年月選擇器

大概效果就是下圖這樣啦

js檔案

年選擇器需要設定type為time型別

layui.use('laydate', function());

});

jsp頁面

jsp頁面跟上面一樣,像上面這樣單獨寫的話,會是佔據頁面的100%的長度,如果不需要這麼長的話,可以使用下面這種。

用乙個div包起來,這樣就可以控制它的大小。

時間選擇器

大概效果就是下圖這樣啦

有值時:

選擇時:

js檔案

年選擇器需要設定type為datetime型別

layui.use('laydate', function());

});

jsp頁面

jsp頁面跟上面一樣,像上面這樣單獨寫的話,會是佔據頁面的100%的長度,如果不需要這麼長的話,可以使用下面這種。

用乙個div包起來,這樣就可以控制它的大小。

日期加時間選擇器

大概效果就是可以選擇日期加時間

有值時:

選擇時:

亂碼

如果是直接從官網copy過來的話,官網的jsp頁面是沒有宣告語言的那條語句的,加上就可以了

然後看結果

然後出現了錯誤2

沒有效果

layui 日期選擇開始時間,結束時間處理

顯示效果1 設定實現 時間範圍設定 laydate.render function index else html 其他時間設定 需求選擇開始時間,結束時間聯動後推乙個月,選擇的區域不能超出12個月 html 開始時間 id start name start placeholder yyyy mm ...

layui 時間按小時選擇 Layui 時間選擇框

layui中 時間格式的輸入框 html 選擇日期 js layui.use layer form table laydate function var layer layui.layer,layui.jquery,form layui.form,laydate layui.laydate,tabl...

layui時間控制項選擇時間範圍

class layui inline class layui input inline type text name start time class layui input id start time placeholder 開始時間 修改時間 div div class layui inline...