要解决 先选定结束日期时,开始日期无法受到限制 的问题,需要确保在初始化选择器时,开始日期选择器 在选择结束日期时也会根据选定的结束日期来更新。
核心问题:
- 目前,当选定结束日期时,开始日期选择器的
min
和max
没有正确地被动态更新。 - 我们需要确保无论是先选定开始日期还是结束日期,两个日期选择器的范围都能相互依赖。
完整解决方案:
<div class="layui-inline">
<label class="layui-form-label">日期</label>
<div class="layui-input-inline">
<input type="text" name="start_date" autocomplete="off" value="<?= $dto->start_date ?>" class="layui-input" id="start_date" placeholder="开始日期">
</div>
<div class="layui-input-inline">
<input type="text" name="end_date" autocomplete="off" value="<?= $dto->end_date ?>" class="layui-input" id="end_date" placeholder="结束日期">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui-layer@3.1.0/dist/layer.js"></script>
<script>
layui.use('laydate', function() {
var laydate = layui.laydate;
var today = new Date(); // 当前日期
var minStartDate = new Date(today - 1000 * 60 * 60 * 24 * 30 * 12 * 10);//最后一个数字30可改,30天的意思
// 初始化变量
var startPicker, endPicker;
// 重新渲染开始日期选择器
function renderStartPicker(minStartDate, maxStartDate) {
startPicker = laydate.render({
elem: '#start_date',
format: 'yyyy-MM-dd',
min: minStartDate ? formatDate(minStartDate) : formatDate(minStartDate),
max: maxStartDate ? formatDate(maxStartDate) : formatDate(today),
done: function(value, date) {
if (value) {
var minEndDate = new Date(date.year, date.month - 1, date.date + 1);
var maxEndDate = new Date(date.year, date.month - 1, date.date + 28);
renderEndPicker(minEndDate, maxEndDate);
}
}
});
}
// 重新渲染结束日期选择器
function renderEndPicker(minEndDate, maxEndDate) {
endPicker = laydate.render({
elem: '#end_date',
format: 'yyyy-MM-dd',
min: minEndDate ? formatDate(minEndDate) : formatDate(minStartDate),
max: maxEndDate ? formatDate(maxEndDate) : formatDate(today),
done: function(value, date) {
if (value) {
var minStartDate = new Date(date.year, date.month - 1, date.date - 28);
var maxStartDate = new Date(date.year, date.month - 1, date.date - 1);
renderStartPicker(minStartDate, maxStartDate);
}
}
});
}
// 初始渲染
renderStartPicker(minStartDate, today);
renderEndPicker(minStartDate, today);
});
</script>
逻辑分析:
初始化两个日期选择器:
renderStartPicker()
和renderEndPicker()
函数分别用于渲染开始和结束日期选择器。- 初始化时,开始日期选择器的最大日期是今天,结束日期选择器没有初始限制。
选定开始日期后:
- 当用户选定一个开始日期后,结束日期选择器会被限制为该开始日期之后的 1 天到 28 天。
renderEndPicker()
通过传入相应的min
和max
重新渲染结束日期选择器。
选定结束日期后:
- 当用户选定一个结束日期后,开始日期选择器会被限制为该结束日期之前的 1 天到 28 天。
renderStartPicker()
通过传入相应的min
和max
重新渲染开始日期选择器。
预期效果:
- 无论用户先选定 开始日期 还是 结束日期,都会动态更新另外一个日期选择器的可选范围。
- 选定开始日期后,结束日期只能从该日期后的 1 到 28 天内选择。
- 选定结束日期后,开始日期只能从该日期前的 1 到 28 天内选择。