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>

以上代码将生成两个可供用户选择的时间输入框，用户可以通过选择开始时间和结束时间来选择一段时间范围。