如何根据语言切换jQuery Datepicker的月份、日期相关参数？

你的代码报错大概率是两个原因：一是如果页面的html元素既没有smrt-es也没有smrt-en类，monthNames变量会未定义；二是你只处理了monthNames，但没覆盖需求里要切换的dayNames、dayNamesShort等所有参数，同时变量作用域也可能引发问题。下面是快速修复的方案：

1. 先统一定义语言配置对象 #

把两种语言需要切换的所有参数整理成结构化对象，方便维护和调用：

const langConfigs = {
  'smrt-es': {
    monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
    monthNamesShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
    dayNames: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
    dayNamesShort: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
    dayNamesMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sá"]
  },
  'smrt-en': {
    monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
  }
};

2. 获取当前页面的语言配置 #

检测html元素的类，匹配对应的配置，同时设置默认值防止无匹配类的情况：

let currentLangConfig = langConfigs['smrt-en']; // 默认英文配置
if ($('html').hasClass('smrt-es')) {
  currentLangConfig = langConfigs['smrt-es'];
} else if ($('html').hasClass('smrt-en')) {
  currentLangConfig = langConfigs['smrt-en'];
}

3. 合并配置到Datepicker初始化 #

把语言配置替换掉原来硬编码的参数：

calendar_arrival.datepicker({
  beforeShow: function () {
    $('#ui-datepicker-div').removeClass('departure').addClass('arrival');
  },
  minDate: mindate,
  dateFormat: format,
  closeText: "Close",
  currentText: "",
  firstDay: 0,
  nextText: " >>",
  prevText: "<< ",
  // 替换为语言配置中的参数
  monthNames: currentLangConfig.monthNames,
  monthNamesShort: currentLangConfig.monthNamesShort,
  dayNames: currentLangConfig.dayNames,
  dayNamesShort: currentLangConfig.dayNamesShort,
  dayNamesMin: currentLangConfig.dayNamesMin,
  isRTL: false,
  onClose: function () {
    var minDate = calendar_arrival.datepicker('getDate');
    if (minDate) {
      minDate.setDate(minDate.getDate() + 2);
    };
    calendar_departure.datepicker('option', 'minDate', minDate || 1).on('focus', function () {
      $(this).trigger('blur');
    }); // Date + 1 or tomorrow by default

    if (convertDates) {
      populateCalendar(calendar_arrival);
      populateCalendar(calendar_departure);
    }
  }
});

额外提示 #

• 这种方式用默认配置兜底，避免了变量未定义的报错；
• 后续新增语言时，只需要在langConfigs里添加新的语言对象即可，不需要修改初始化逻辑；
• 所有需要切换的语言参数都统一管理，逻辑更清晰。

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