Layui时间选择器，Layui时间控件选择时间范围的方法

官方文档：https://www.layui.site/doc/modules/laydate.html

通用时间渲染函数

 function renderTime(elem, type, value, range, fn) {
    layui.laydate.render({
        elem: elem, //绑定元素
        type: type, //时间类别
        value: value, //默认值
        range: range, //是否开启时间范围
        done: fn, //选择时间触发的回调函数
        trigger: 'click',
        theme: '#1890ff', //主题色
    });
}

普通时间选择器

• 效果
  
• 代码

//html
<div class="layui-form-item">
    <label class="layui-form-label">开始时间：</label>
    <div class="layui-input-inline">
        <input type="text" class="layui-input" name="stime_1" id="stime_1" readonly>
    </div>
</div>
// js
renderTime('#stime_1', 'date', "", false, null);

时间范围1

• 效果
  
• 代码

// html
  <div class="layui-form-item ">
      <label class="layui-form-label">上传时间：</label>
      <div class="layui-input-inline" style="width: 292px;">
          <input type="text" class="layui-input" name="" id="time_range_1" readonly
              placeholder="开始时间 至 结束时间">
          <input type="text" style="display: none;" name="hide_stime" id="hide_stime_1" readonly>
          <input type="text" style="display: none;" name="hide_etime" id="hide_etime_1" readonly>
      </div>
  </div>
  //js
	renderTime("#time_range_1", "date", "", true, function (value, date, endDate) {
		if (value) {
			let arr = value.split(" - ")
			$("#hide_stime_1").val(arr[0]);
			$("#hide_etime_1").val(arr[1])
		} else {
			$("#hide_stime_1").val("");
			$("#hide_etime_1").val("")
		}
});

时间范围2

• 效果
  

• 代码

//html
<div class="layui-form-item">
    <label class="layui-form-label">时间范围2：</label>
    <div class="layui-inline">
        <div class="layui-inline" id="timer">
            <div class="layui-input-inline">
                <input type="text" name="sTime" id="sTime" class="layui-input" placeholder="选择日期"
                    readonly>
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <input type="text" name="eTime" id="eTime" class="layui-input" placeholder="选择日期"
                    readonly>
            </div>
        </div>
    </div>
</div>
//js
renderTime("#timer", "date", "", ["#sTime", '#eTime']);