layDate日期组件,实现最大日期是当前时间,开始时间和结束时间的互相制约
//html
<div class="layui-form">
<div class="layui-inline">
<label class="layui-form-label">操作时间:</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test1" readonly="" placeholder="请选择开始时间">
</div>
<span>至</span>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test2" readonly="" placeholder="请选择结束时间">
</div>
</div>
</div>
//js代码
layui.use("laydate", function() {
var laydate = layui.laydate;
var nowtime = new Date().Format("yyyy-MM-dd HH:mm:ss"); //获取当前时间,调用函数可参考以下链接(https://blog.csdn.net/qq_43155489/article/details/99865268)
var start = laydate.render({
elem: '#test1' //指定元素
, theme: 'blue'
, type: 'datetime' //控件选择类型
, max: nowtime
, done: function (value, date, endDate) {
//结束时间的最小时间
end.config.min = {
year: date.year,
month: date.month - 1,
date: date.date,
hours:date.hours,
minutes:date.minutes,
seconds:date.seconds
}
}
});
var end = laydate.render({
elem: '#test2' //指定元素
, theme: 'blue'
, type: 'datetime'
, max: nowtime
, done: function (value, date, endDate) {
if (value === '' || value === null) {
//清空时,开始时间的最大时间是当前时间
var nowDate = new Date();
start.config.max = {
year: nowDate.getFullYear(),
month: nowDate.getMonth(),
date: nowDate.getDate(),
hours:nowDate.getHours(),
minutes:nowDate.getMinutes(),
seconds:nowDate.getSeconds()
};
return
}
//开始时间的最大时间
start.config.max = {
year: date.year,
month: date.month - 1,
date: date.date,
hours:date.hours,
minutes:date.minutes,
seconds:date.seconds
}
}
});
});
效果如下图所示