Layui時間選擇器詳解

一、Layui時間選擇器圖標

在Layui時間選擇器中，用戶可以通過選擇圖標來觸發時間選擇器彈窗。可以通過下面的代碼來實現一個Layui時間選擇器圖標。

<div class="layui-input-inline">
    <input type="text" class="layui-input" id="test1" placeholder="請選擇時間">
</div>

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //執行一個laydate實例
        laydate.render({
            elem: '#test1', //指定元素
            showBottom: false //不顯示底部按鈕
        });
    });
</script>

以上代碼會自動生成一個默認的圖標，並且用戶可以通過點擊圖標來彈出時間選擇器，並選擇預期的時間。

二、Layui時間選擇器選擇時分秒

在實際應用中，用戶可能需要對時間進行時分秒的選擇。Layui時間選擇器也提供了這樣的功能，可以通過下面的代碼來實現。

<div class="layui-input-inline">
    <input type="text" class="layui-input" id="test2" placeholder="請選擇時間">
</div>

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //執行一個laydate實例
        laydate.render({
            elem: '#test2', //指定元素
            type: 'time', //指定時間類型為時分秒
            format: 'HH:mm:ss', //指定時間格式
            showBottom: false //不顯示底部按鈕
        });
    });
</script>

以上代碼會生成一個可供用戶選擇時分秒的時間選擇器。

三、Layui時間選擇器範圍選取

有時候，用戶可能需要選擇一段時間範圍，此時可以使用Layui時間選擇器的範圍選擇功能。下面的代碼演示了如何實現。

<div class="layui-inline">
    <label class="layui-form-label">開始時間</label>
    <div class="layui-input-inline">
        <input type="text" class="layui-input" id="test3-1" placeholder="請選擇開始時間">
    </div>
</div>
<div class="layui-inline">
    <label class="layui-form-label">結束時間</label>
    <div class="layui-input-inline">
        <input type="text" class="layui-input" id="test3-2" placeholder="請選擇結束時間">
    </div>
</div>

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //執行一個laydate實例
        laydate.render({
            elem: '#test3-1', //指定開始時間元素
            type: 'datetime', //指定時間類型為日期時間
            format: 'yyyy年MM月dd日 HH:mm:ss', //指定時間格式
            theme: 'molv', //指定顏色主題
            min: '2010-01-01 00:00:00', //開始時間最小值
            max: '2022-12-31 23:59:59', //開始時間最大值
            btns: ['clear', 'confirm'], //指定底部按鈕
            done: function(value, date){ //選擇完成回調函數
                end.max = value; //設置結束時間的最大值
            }
        });

        var end = laydate.render({
            elem: '#test3-2', //指定結束時間元素
            type: 'datetime', //指定時間類型為日期時間
            format: 'yyyy年MM月dd日 HH:mm:ss', //指定時間格式
            theme: 'molv', //指定顏色主題
            btns: ['clear', 'confirm'], //指定底部按鈕
            done: function(value, date){ //選擇完成回調函數
                start.min = value; //設置開始時間的最小值
            }
        });

        var start = laydate.render({
            elem: '#test3-1', //綁定開始時間元素
            type: 'datetime', //指定時間類型為日期時間
            format: 'yyyy年MM月dd日 HH:mm:ss', //指定時間格式
            theme: 'molv', //指定顏色主題
            btns: ['clear', 'confirm'], //指定底部按鈕
            done: function(value, date){ //選擇時間完成回調函數
                end.min = value; //設置結束時間的最小值
                end.value = ""; //清空結束時間的值
            }
        });
    });
</script>

以上代碼將生成兩個可供用戶選擇的時間輸入框，用戶可以通過選擇開始時間和結束時間來選擇一段時間範圍。