bootstrap-datepicker:如何动态更改语言属性?



我正在使用来自https://github.com/uxsolutions/bootstrap-datepicker的bootstrap-datepicker一切都如预期般顺利。

我的初始化脚本是
$('.input-group.date').datepicker({
format: "yyyy-mm-dd",
language: "en"
});

但是现在我想动态地改变语言,我试过

$('.input-group.date').datepicker({
format: "yyyy-mm-dd",
language: $('.active .lang-id').text().toLowerCase() // <- the field from which I read lang param i.e ru, es, etc...
});

不起作用,语言和第一次读的是一样的。如何让它发挥作用?这可能吗?

更新第一

在@Cameron的帮助下,我成功地动态更新了一门语言这段代码,但现在,当我按下一个日期选择器,我可以看到在一秒钟内,日期选择器弹出(显示日历)如何从语言a转换到语言b。如何避免这种不愉快的效果?更新后的代码

$('.input-group.date').on('click', function() {
if ($(this).datepicker != null) {
console.log("is not null");
$(this).datepicker('destroy');
}
currentLanguage = $('.active .lang-id').text().toLowerCase();
$('.input-group.date').datepicker({
format: "yyyy-mm-dd",
language: currentLanguage
});
$(this).datepicker('update');
$(this).datepicker('show');
console.log("test" + $('.active .lang-id').text().toLowerCase());
});

尝试在datepicker()之前抓取文本的值

*更新找到了一些"设置默认值"。关于jquery Datepicker

const language= $('.active .lang-id').text().toLowerCase();
console.log('select language is '+ language);
//be sure your selector is working
$('.input-group.date').datepicker({
format: "yyyy-mm-dd",
language:  language
});

更新
$( document ).ready(function() {
const language= $('.active .lang-id').text().toLowerCase();
//be sure your selector is working
console.log('select language is '+ language);
$('.input-group.date').datepicker({
format: "yyyy-mm-dd",
language:  language
});
});

你可能已经加载了本地脚本

$( document ).ready(function() {
const language= $('.active .lang-id').text().toLowerCase();
//be sure your selector is working
console.log('select language is '+ language);
const script = document.createElement('script');
script.src = `https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.${language}.min.js`;
// Append to the `head` element
document.head.appendChild(script);
$('.input-group.date').datepicker({
format: "yyyy-mm-dd",
language:  language
});
});

相关内容

  • 没有找到相关文章

最新更新