如何为jQuery UI Datepicker设置三个日期输入框的最小-最大日期关联关系

看起来你已经把开始日期（WL_StartDate）和结束日期（WL_EndDate）的联动逻辑搞定了，现在卡在收货日期（ReceivedDate）和开始日期的关联上对吧？我帮你排查下问题，再给出完整的解决方案~

你现有代码的问题点 #

你写的收货日期代码最后多了一个多余的});，这会导致语法错误，让代码无法正常运行。除此之外，你只处理了「选完收货日期后更新开始日期的最小日期」，但反过来当开始日期被修改时，没有同步更新收货日期的最大日期——比如用户先选了一个开始日期，再去选收货日期的时候，就不会受到“必须早于开始日期”的限制，这也是逻辑上的漏洞。

修正后的完整代码 #

我们把三个日期选择器的初始化都放在同一个DOM就绪函数里，同时补全双向联动的逻辑：

$(function () {
    // 初始化收货日期（ReceivedDate）
    $("#ReceivedDate").attr("autocomplete", "off").datepicker({
        maxDate: '0', // 最大可选今天
        changeMonth: true,
        changeYear: true,
        onSelect: function (selected) {
            // 选完收货日期后，设置开始日期的最小日期为选中值
            $("#WL_StartDate").datepicker("option", "minDate", selected);
        }
    });

    // 初始化开始日期（WL_StartDate）
    $("#WL_StartDate").attr("autocomplete", "off").datepicker({
        changeMonth: true,
        changeYear: true,
        onSelect: function (selected) {
            // 选完开始日期后，设置结束日期的最小日期 + 收货日期的最大日期
            $("#WL_EndDate").datepicker("option", "minDate", selected);
            $("#ReceivedDate").datepicker("option", "maxDate", selected);
        }
    });

    // 初始化结束日期（WL_EndDate）
    $("#WL_EndDate").attr("autocomplete", "off").datepicker({
        changeMonth: true,
        changeYear: true,
        onSelect: function (selected) {
            // 选完结束日期后，设置开始日期的最大日期
            $("#WL_StartDate").datepicker("option", "maxDate", selected);
        }
    });

    // 初始化时同步默认限制（如果有默认值的话）
    const initialStartDate = $("#WL_StartDate").val();
    if (initialStartDate) {
        $("#ReceivedDate").datepicker("option", "maxDate", initialStartDate);
        $("#WL_EndDate").datepicker("option", "minDate", initialStartDate);
    }
});

逻辑说明 #

• 收货日期：最多选到今天，且选完后限制开始日期不能早于它；同时当开始日期被修改时，收货日期的最大日期会同步更新为新的开始日期，确保收货日期永远更早。
• 开始日期：选完后既限制结束日期不能早于它，也限制收货日期不能晚于它；同时会被结束日期限制最大可选值，也会被收货日期限制最小可选值。
• 结束日期：选完后限制开始日期不能晚于它，保持你原来的逻辑不变。
• 最后加了初始化时的同步逻辑，如果页面加载时开始日期已有默认值，会自动同步另外两个日期的限制，避免初始状态下的逻辑漏洞。

这样调整后，三个日期的关联逻辑就完整啦，你可以试试这个代码~

备注：内容来源于stack exchange，提问作者Acadia