1. 程式人生 > >覆寫layui laydate css,時間顯示小時和分鐘

覆寫layui laydate css,時間顯示小時和分鐘

問題引入:

在使用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',
            });

最終效果如下: