要解决 先选定结束日期时，开始日期无法受到限制 的问题，需要确保在初始化选择器时，开始日期选择器 在选择结束日期时也会根据选定的结束日期来更新。
核心问题：
- 目前，当选定结束日期时，开始日期选择器的
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 天内选择。
