Bootstrap模态框中datepicker的daysOfWeekDisabled二次触发失效求助

这个问题我之前也碰到过！核心原因是第一次初始化Datepicker之后，它的实例就留在DOM里了，第二次触发模态框时直接修改配置的话，旧实例不会自动更新。给你几个靠谱的解决办法：

方法一：销毁旧实例再重新初始化 #

每次模态框触发shown.bs.modal事件时，先销毁已存在的Datepicker实例，再用AJAX获取到的新数据重新初始化。这种方式最稳妥，能彻底避免旧配置残留的问题：

$('#yourModal').on('shown.bs.modal', function() {
    // 先销毁已有的datepicker实例
    $('#yourDatepicker').datepicker('destroy');
    
    // 发起AJAX请求获取禁用的星期数组
    $.ajax({
        url: '你的接口地址',
        type: 'GET',
        success: function(data) {
            // 假设data返回格式为[0,6]（代表禁用周日、周六）
            $('#yourDatepicker').datepicker({
                daysOfWeekDisabled: data,
                // 其他你的Datepicker配置项
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayHighlight: true
            });
        }
    });
});

方法二：动态更新Datepicker配置（无需销毁实例） #

如果你不想频繁销毁重建实例，可以使用Datepicker提供的option方法直接更新配置。不过要注意，这种方式需要确保Datepicker已经完成初始化：

$('#yourModal').on('shown.bs.modal', function() {
    // 先判断Datepicker是否已初始化
    const datepickerInstance = $('#yourDatepicker').data('datepicker');
    if (!datepickerInstance) {
        // 第一次打开时初始化
        $('#yourDatepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true
        });
    }

    // 发起AJAX请求获取新的禁用星期
    $.ajax({
        url: '你的接口地址',
        type: 'GET',
        success: function(data) {
            // 动态更新daysOfWeekDisabled配置
            $('#yourDatepicker').datepicker('option', 'daysOfWeekDisabled', data);
        }
    });
});

关键注意点 #

• 一定要保证AJAX请求完成后再初始化/更新Datepicker，避免出现数据未返回就加载配置的情况；
• 如果模态框中有多个Datepicker，要确保选择器（#yourDatepicker）唯一，避免影响其他实例；
• 测试时可以在AJAX的success回调里打印data，确认返回的禁用星期数组格式正确（必须是数字数组，比如[0,2,4]）。

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