如何为jQuery Datepicker动态设置minDate与maxDate

问题场景 #

我在项目中使用了两个jQuery Datepicker，需求是第二个（EndDate）的minDate和maxDate需根据第一个（EffectiveDate）的实际选中值动态变化，但当前选择第二个Datepicker时限制未生效，仍可选择早于第一个选中日期的日期。

问题根源 #

你的代码核心问题在于直接解析格式化后的日期字符串创建Date对象时，浏览器会因dd/mm/yy格式的兼容性问题导致日期解析错误，进而使minDate的设置失效。此外，jQuery UI Datepicker本身提供了更可靠的日期获取方法，无需手动解析字符串。

修正后的完整代码 #

HTML部分

（注：若EffectiveDate需要用户选择，需移除disabled属性，或后续通过JS动态启用）

<input aria-label="date" type="text" id="EffectiveDate" data-bind="value: EffectiveDate" name="EffectiveDate" placeholder="dd/mm/yyyy" size="10" maxlength="10" style="margin-left:0px;" />
<input aria-label="date" type="text" id="EndDate" name="EndDate" placeholder="dd/mm/yyyy" size="10" maxlength="10" style="margin-left:0px;" />

jQuery代码

// 初始化EndDate日期选择器
$("#EndDate").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true
});

// 初始化EffectiveDate日期选择器
$("#EffectiveDate").datepicker({
    dateFormat: 'dd/mm/yy',
    minDate: vm.MinimumEffectiveDate(), // 保留原有初始最小日期设置
    onSelect: function() {
        // 使用getDate()直接获取选中的标准Date对象，避免字符串解析错误
        var selectedDate = $(this).datepicker("getDate");
        if (selectedDate) {
            // 计算EndDate的最小日期：选中日期+1天
            var minEndDate = new Date(selectedDate);
            minEndDate.setDate(minEndDate.getDate() + 1);
            
            // 计算EndDate的最大日期：选中日期+2年
            var maxEndDate = new Date(selectedDate);
            maxEndDate.setFullYear(maxEndDate.getFullYear() + 2);
            
            // 更新EndDate的日期限制
            $("#EndDate").datepicker("option", "minDate", minEndDate);
            $("#EndDate").datepicker("option", "maxDate", maxEndDate);
        }
    }
});

关键说明 #

1. 使用getDate()获取日期：直接从Datepicker实例中获取标准Date对象，彻底避免了dd/mm/yy格式字符串在不同浏览器中解析不一致的问题。
2. 安全计算偏移日期：用setDate()和setFullYear()方法计算日期偏移，比手动操作时间戳更直观，且不会出现跨月/跨年的计算错误。
3. 空值判断：增加选中日期的非空判断，避免用户清空EffectiveDate时出现异常。

内容的提问来源于stack exchange，提问作者Iria