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>// jsrenderTime('#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" readonlyplaceholder="开始时间 至 结束时间"><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>//jsrenderTime("#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>//jsrenderTime("#timer", "date", "", ["#sTime", '#eTime']);