如何动态修改Vanilla JS Datepicker的配置选项？

我在页面中使用Vanilla JS Datepicker，搭配一个多门店选择下拉框——不同门店的营业规则不同：有的周末休息，有的周末全营业，还有的仅周日休息、周六正常营业。

需求是通过选择框的事件监听器，调用函数给选中的门店生成对应禁用休息日的Datepicker。但现在遇到的问题是：首次选门店时，日历能正确按配置禁用休息日，但后续切换门店时，日历的禁用规则完全没更新。已经确认传入函数的禁用日期数组是随选择变化的，但日历就是不生效。

代码示例：

let date1 = document.querySelector('input[name="Service_Date"]');
let closeDays = [];

function d1(days){
let serviceDate = new Datepicker(date1, {
autohide:true,
nextArrow:"<span class='fa fa-chevron-right'></span>",
prevArrow:"<span class='fa fa-chevron-left'></span>",
minDate:"today",
daysOfWeekDisabled:days
});    
}

closeDays = [0];
d1(closeDays);
closeDays = [];
closeDays = [0,6]
d1(closeDays);

上面的代码里，第一次调用d1([0])后，日历会禁用周日（0），但第二次调用d1([0,6])后，本该禁用周日和周六，实际却没生效。试过多种调用方式，数组和参数确实变了，但日历没更新。

问题根源 #

每次调用new Datepicker()都会创建一个新的实例，但原来的实例并没有被销毁，新实例的配置不会覆盖旧的——页面上实际还是旧的Datepicker在工作，所以配置没更新。

解决方案 #

方法一：复用同一个实例（推荐） #

不要每次都创建新实例，先初始化一次基础配置的Datepicker，之后用setOptions()方法更新禁用日期：

let date1 = document.querySelector('input[name="Service_Date"]');
let closeDays = [];

// 先初始化一次Datepicker实例，配置基础选项
let serviceDate = new Datepicker(date1, {
    autohide: true,
    nextArrow: "<span class='fa fa-chevron-right'></span>",
    prevArrow: "<span class='fa fa-chevron-left'></span>",
    minDate: "today",
    daysOfWeekDisabled: [] // 默认无禁用日期
});

// 专门的更新函数
function updateDatepicker(days) {
    // 更新禁用日期配置
    serviceDate.setOptions({
        daysOfWeekDisabled: days
    });
    // 调用refresh强制刷新日历视图
    serviceDate.refresh();
}

// 测试调用
closeDays = [0];
updateDatepicker(closeDays);
closeDays = [0, 6];
updateDatepicker(closeDays);

方法二：销毁旧实例再创建新的 #

如果必须重新创建实例，要先销毁之前的实例再生成新的：

let date1 = document.querySelector('input[name="Service_Date"]');
let closeDays = [];
let serviceDate = null; // 保存实例引用

function d1(days) {
    // 存在旧实例就先销毁
    if (serviceDate) {
        serviceDate.destroy();
    }
    // 创建新实例
    serviceDate = new Datepicker(date1, {
        autohide: true,
        nextArrow: "<span class='fa fa-chevron-right'></span>",
        prevArrow: "<span class='fa fa-chevron-left'></span>",
        minDate: "today",
        daysOfWeekDisabled: days
    });
}

// 测试调用
closeDays = [0];
d1(closeDays);
closeDays = [0, 6];
d1(closeDays);

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