layui怎么限定第二个日期范围选择晚于第一个日期选择器
可以使用laydate的range参数来限定第二个日期选择器晚于第一个日期选择器。
具体步骤如下:
-
在HTML中引入laydate的js和css文件。
-
在HTML中创建第一个日期选择器的input元素,并设置一个唯一的id。
<input type="text" id="start" readonly>
- 在HTML中创建第二个日期选择器的input元素,并设置一个唯一的id。
<input type="text" id="end" readonly>
- 在JavaScript中初始化第一个日期选择器,并设置range参数为
true。
layui.use('laydate', function(){
var laydate = layui.laydate;
laydate.render({
elem: '#start',
range: true,
done: function(value, date, endDate){
// 在第一个日期选择器的选择完成后,更新第二个日期选择器的最小日期限制
var minDate = endDate;
if (minDate) {
minDate.year += 1; // 第二个日期选择器的最小日期限制为第一个日期选择器的选择结果加一年
}
laydate.render({
elem: '#end',
min: minDate
});
}
});
});
- 在JavaScript中初始化第二个日期选择器,并设置min参数为第一个日期选择器的选择结果加一年。
layui.use('laydate', function(){
var laydate = layui.laydate;
laydate.render({
elem: '#end',
min: '+1Y' // 第二个日期选择器的最小日期限制为当前日期加一年
});
});
这样,当用户选择第一个日期选择器的日期后,第二个日期选择器的最小日期限制就会更新为第一个日期选择器的选择结果加一年
原文地址: http://www.cveoy.top/t/topic/h07I 著作权归作者所有。请勿转载和采集!