laydate.laydate.render()开始日期和结束日期选择器互相限制选择值动态生效

要解决 先选定结束日期时，开始日期无法受到限制 的问题，需要确保在初始化选择器时，开始日期选择器 在选择结束日期时也会根据选定的结束日期来更新。

核心问题：

• 目前，当选定结束日期时，开始日期选择器的 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>

逻辑分析：

1. 初始化两个日期选择器：

   • renderStartPicker() 和 renderEndPicker() 函数分别用于渲染开始和结束日期选择器。
   • 初始化时，开始日期选择器的最大日期是今天，结束日期选择器没有初始限制。

2. 选定开始日期后：

   • 当用户选定一个开始日期后，结束日期选择器会被限制为该开始日期之后的 1 天到 28 天。
   • renderEndPicker() 通过传入相应的 min 和 max 重新渲染结束日期选择器。

3. 选定结束日期后：

   • 当用户选定一个结束日期后，开始日期选择器会被限制为该结束日期之前的 1 天到 28 天。
   • renderStartPicker() 通过传入相应的 min 和 max 重新渲染开始日期选择器。

预期效果：

• 无论用户先选定 开始日期 还是 结束日期，都会动态更新另外一个日期选择器的可选范围。
• 选定开始日期后，结束日期只能从该日期后的 1 到 28 天内选择。
• 选定结束日期后，开始日期只能从该日期前的 1 到 28 天内选择。