官方文档: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']);