layui时间选择器

h5自带的时间选择器,简单,但是美观性上差一些,可以用layui自带的时间选择器插件,来美化一下

效果

 

 修改的话,其他代码无需变化

js添加代码

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#time_start',
        });
        laydate.render({
            elem: '#time_end',
        });
    });


</script>

注意:time_start和time_end需要分开写,不能写在一起

<label class="layui-form-label">日期区间</label>
<div class="layui-input-inline">
    <input class="layui-input" id="time_start" name="time_start" type="text" value="{$data_where.time_start}"  placeholder="yyyy-MM-dd">
</div>
<div class="layui-input-inline">
    <input class="layui-input" id="time_end" name="time_end" type="text" value="{$data_where.time_end}"  placeholder="yyyy-MM-dd">
</div>

type="date"需要改为text或者直接删掉,不然的话,会点击的时候,出来两个时间选择器,重叠显示