jQuery UI Datepicker 1.13.2：如何重置下拉触发的禁用日期

你的问题核心是已初始化的Datepicker无法通过重复调用初始化方法更新beforeShowDay配置，因为jQuery UI Datepicker在已初始化的元素上再次调用datepicker()不会覆盖原有配置。下面提供两种可行的解决方案：

方案一：销毁后重新初始化 #

先销毁已存在的Datepicker实例，再传入更新后的禁用日期重新初始化，确保配置完全生效：

selectChange: function () {
    // 销毁已有的日期选择器实例
    $('.date').datepicker("destroy");
    
    // 替换为你实际获取到的新禁用日期数组
    var disabledDates = ["2023-09-01"];
    
    // 重新初始化日期选择器
    $('.date').datepicker({
        dateFormat: 'yy-mm-dd',
        minDate: minDate,
        firstDay: firstDay,
        maxDate: max_date,
        defaultDate: default_date,
        showWeek: show_week,
        beforeShowDay: function (date) {
            var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
            // 返回[true]表示日期可用，[false]表示禁用
            return [disabledDates.indexOf(string) === -1];
        }
    });
}

方案二：直接更新配置项（推荐） #

无需销毁实例，通过datepicker("option")方法直接更新beforeShowDay回调，再刷新组件，性能更优：

// 全局或外层作用域定义禁用日期变量，方便后续更新
let disabledDates = [];

// 初始化日期选择器（仅执行一次，放在selectChange事件外部）
$('.date').datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: minDate,
    firstDay: firstDay,
    maxDate: max_date,
    defaultDate: default_date,
    showWeek: show_week,
    beforeShowDay: function (date) {
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [disabledDates.indexOf(string) === -1];
    }
});

// 下拉框选择事件处理
selectChange: function () {
    // 更新禁用日期数组为新获取的数据
    disabledDates = ["2023-09-01"];
    
    // 更新beforeShowDay配置
    $('.date').datepicker("option", "beforeShowDay", function(date) {
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [disabledDates.indexOf(string) === -1];
    });
    
    // 刷新日期选择器，使新配置生效
    $('.date').datepicker("refresh");
}

原代码失效原因 #

当Datepicker已在元素上初始化后，再次调用$('.date').datepicker({...})只会读取已有配置，不会覆盖beforeShowDay这类回调函数，因此新的禁用日期规则无法生效。

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