覆寫layui laydate css,時間顯示小時和分鐘
阿新 • • 發佈:2018-11-19
問題引入:
在使用layui laydate時間控制元件,顯示時間,時分秒都會顯示,然而目前暫未提供只顯示 小時 和 分鐘 的型別。怎麼辦呢?
當時我換了一種思維,在不修改原始碼的情況下,看是否能覆蓋laydate ,將顯示“秒”的那列給隱藏掉。經過測試,果然,這是可以的。如下:
(1)在我們頁面裡面加入下面css:
/********start 覆蓋laydate預設樣式,用於顯示小時和分鐘********/ .layui-laydate-content>.layui-laydate-list { padding-bottom: 0px; overflow: hidden; } .layui-laydate-content>.layui-laydate-list>li{ width:50% } /********end 覆蓋laydate預設樣式,用於顯示小時和分鐘********/
雖然可以把 秒 那列隱藏掉,但還需要注意一點:
在laydate 渲染js程式碼裡,把其format修改成HH:mm,這樣才能最終效果,完美O(∩_∩)O~
laydate.render({
elem:'#startTime',
type:'time' ,
format:'HH:mm',//顯示格式:小時:分鐘
min:'08:00:00',
max: '23:30:00',
});
最終效果如下: