当前位置：首页 > article >正文

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

article 2024/10/22 3:54:22

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

核心问题：

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