**
layui时间范围选择
相信很多时候项目中会遇到时间范围选择,废话不多说上图
上代码:
<div class="layui-inline">
<div class="layui-input-inline" style="width: 160px;">
<input type="text" class="layui-input" id="start_time"name="start_time" placeholder="开始时间">
</div>
<div class="layui-form-mid">至</div>
<div class="layui-input-inline" style="width: 160px;">
<input type="text" class="layui-input" id="end_time" name="end_time" placeholder="结束时间">
</div>
</div>
实现的效果是,开始时间选择不能大于当前时间,结束时间大于开始时间小于当前时间,上代码:
layui.use([ 'laydate'], function() {
var form = layui.form,
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate;
var endDate = laydate.render({
elem: '#end_time',
eventElem: '.date-input-icon',
max: getCurrentDate(),
done: function(value, date) {
startDate.config.max = {
year: date.year,
month: date.month - 1,
date: date.date,
}
}
});
var startDate = laydate.render({
elem: '#start_time',
eventElem: '.date-input-icon',
max: getCurrentDate(),
done: function(value, date) {
endDate.config.min = {
year: date.year,
month: date.month - 1,
date: date.date,
};
}
});
}
后续上vue项目中用laydate,创造不易,复制代码的同时,记得关注点赞哦!