在同一页面使用多语言（英文、日文）的多个jQuery UI Datepicker控件

我之前遇到过完全一样的问题！这是因为jQuery UI Datepicker的本地化设置是全局共享的——当你第一次触发日文控件后，全局的日期文本（星期、月份）都被替换成日文了，之后再点英文控件，它会直接复用这个全局配置，导致显示错乱。下面是几个亲测有效的解决方案：

1. 为每个控件创建独立的本地化配置副本（推荐） #

不要使用全局的setDefaults来设置语言，而是在初始化每个Datepicker时，通过$.extend创建本地化配置的独立副本，这样每个控件的配置完全隔离，不会互相影响：

// 初始化英文日期选择器
$("#english-datepicker").datepicker(
  $.extend({}, $.datepicker.regional['en'], {
    dateFormat: 'mm/dd/yy' // 可根据需求自定义格式
  })
);

// 初始化日文日期选择器
$("#japanese-datepicker").datepicker(
  $.extend({}, $.datepicker.regional['ja'], {
    dateFormat: 'yy/mm/dd' // 日文常用的日期格式
  })
);

这里的$.extend({}, 本地化对象)会创建一个全新的配置对象，不会修改全局的$.datepicker.regional资源，从根源上避免了语言污染的问题。

2. 打开控件前强制切换全局语言 #

如果第一种方法不适用（比如你需要动态切换语言），可以在每个控件的beforeShow事件中，临时切换全局的本地化配置：

$("#english-datepicker").datepicker({
  beforeShow: function() {
    // 打开前强制设置为英文配置
    $.datepicker.setDefaults($.datepicker.regional['en']);
  },
  dateFormat: 'mm/dd/yy'
});

$("#japanese-datepicker").datepicker({
  beforeShow: function() {
    // 打开前强制设置为日文配置
    $.datepicker.setDefaults($.datepicker.regional['ja']);
  },
  dateFormat: 'yy/mm/dd'
});

这个方法的原理是每次打开控件时，先把全局配置切换到对应语言，确保控件渲染时使用正确的文本。不过要注意，如果两个控件同时处于打开状态（比如弹窗叠加），可能会出现冲突，适合单控件交互的场景。

3. 确认本地化资源已正确加载 #

最后别忘了检查是否已经引入了对应的语言包资源。如果是使用完整的i18n包：

<script src="jquery-ui.min.js"></script>
<script src="jquery-ui-i18n.min.js"></script>

或者单独引入所需的语言文件：

<script src="jquery-ui.min.js"></script>
<script src="i18n/datepicker-en.js"></script>
<script src="i18n/datepicker-ja.js"></script>

缺少语言包的话，控件会回退到默认语言，也可能导致显示异常。

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