bootstrap-datepicker如何动态修改language属性及解决切换闪跳问题

问题1：动态修改语言不生效的解决 #

bootstrap-datepicker 初始化完成后，重复调用 .datepicker(options) 不会覆盖已存在的实例配置，因此你第二次写的配置不会生效，该组件本身支持动态修改语言，有两种实现方案：

方案1：调用官方API动态更新（推荐，无需销毁实例）

在你切换系统语言的逻辑回调中（也就是修改 .active .lang-id 状态的代码之后），直接调用 setOption 方法更新配置即可：

// 初始初始化代码保持不变
$('.input-group.date').datepicker({
    format: "yyyy-mm-dd",
    language: "en"
});

// 语言切换时执行以下代码
const currentLanguage = $('.active .lang-id').text().toLowerCase();
$('.input-group.date').datepicker('setOption', 'language', currentLanguage);

方案2：销毁重建（兼容低版本组件）

如果使用的组件版本不支持 setOption 方法，可以在语言切换时先销毁旧实例再重新初始化，不要把这段逻辑放在输入框点击事件中：

// 语言切换时执行
const currentLanguage = $('.active .lang-id').text().toLowerCase();
$('.input-group.date').datepicker('destroy').datepicker({
    format: "yyyy-mm-dd",
    language: currentLanguage
});

问题2：弹窗语言闪跳的解决 #

你现在遇到的闪跳问题，核心原因是把销毁重建逻辑绑定在了输入框的点击事件上：点击输入框时组件会先触发默认的弹窗逻辑，显示旧语言的弹窗，之后你销毁重建再显示新语言的弹窗，就会出现切换闪烁。
按照上面的方案把语言更新逻辑移到「语言切换动作的回调」中预执行，用户后续点击输入框弹出的直接就是对应语言的弹窗，不会有任何闪烁。
如果你的业务场景确实需要在点击输入框时才判断语言，可以修改你的代码阻止默认弹窗触发，等实例重建完成后再手动唤起弹窗：

$('.input-group.date').off('click').on('click', function(e) {
    // 阻止默认的弹窗触发行为
    e.preventDefault();
    e.stopPropagation();
    const $currentPicker = $(this);
    // 正确判断实例是否存在
    if ($currentPicker.data('datepicker')) {
        $currentPicker.datepicker('destroy');
    }
    const currentLanguage = $('.active .lang-id').text().toLowerCase();
    // 重建后手动唤起弹窗
    $currentPicker.datepicker({
        format: "yyyy-mm-dd",
        language: currentLanguage
    }).datepicker('show');
});

注意事项 #

• 需提前引入所有需要用到的语言对应的资源文件，否则设置 language 参数不会生效
• 优先选择全局切换语言时预更新配置的方案，性能和体验都优于点击时动态处理

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