如何在AngularJS+jQuery UI动态日期选择器中设置西班牙语区域选项？

看起来你的动态日期字段功能已经跑通了，就差西班牙语的周/月显示配置对吧？我来帮你一步步搞定：

1. 先确认加载了西班牙语本地化资源 #

如果用的是AngularJS的UI Bootstrap Datepicker，首先要确保引入了对应的本地化文件（比如angular-locale_es-es.js），这个文件会覆盖Angular的默认区域设置，包括月份、星期的西班牙语翻译。

你可以直接在页面里引入：

<script src="path/to/angular-locale_es-es.js"></script>

（如果是用npm/yarn安装的，也可以通过模块导入的方式加载）

2. 在指令中配置Datepicker的区域选项 #

你的myDirective需要给日期选择器传递西班牙语的配置。如果是UI Datepicker，可以通过datepicker-options属性来指定，或者在指令内部设置ngModel的相关配置。

修改你的指令代码，添加区域配置：

app.directive('myDirective', function($locale) {
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
      agdate: '@',
      seldate: '=' // 假设是双向绑定的选中日期
    },
    link: function(scope, element, attrs, ngModelCtrl) {
      // 确保使用西班牙语区域的日期格式和文本
      scope.dateOptions = {
        formatYear: 'yyyy',
        startingDay: 1, // 西班牙语星期从周一（1）开始，默认是周日（0）
        showWeeks: true,
        // 如果需要自定义文本，可以手动覆盖（加载本地化文件后通常自动生效）
        monthNames: $locale.DATETIME_FORMATS.MONTH,
        monthNamesShort: $locale.DATETIME_FORMATS.SHORTMONTH,
        dayNames: $locale.DATETIME_FORMATS.DAY,
        dayNamesShort: $locale.DATETIME_FORMATS.SHORTDAY,
        dayNamesMin: $locale.DATETIME_FORMATS.SHORTESTDAY
      };

      // 初始化首个字段为今日日期
      if (!scope.seldate) {
        scope.seldate = new Date();
      }
    }
  };
});

3. 在动态生成的模板中应用配置 #

动态生成日期字段时，要把datepicker-options绑定到我们的dateOptions上，确保每个新生成的选择器都用西班牙语配置：

<!-- 假设你的动态字段模板是这样的 -->
<div ng-repeat="field in dynamicFields">
  <input type="text" 
         my-directive
         ng-model="field.selectedDate"
         datepicker-popup="dd/MM/yyyy"
         datepicker-options="dateOptions"
         is-open="field.isOpen"
         ng-click="field.isOpen = true" />
</div>

4. 常见问题排查 #

• 如果加载本地化文件后还是没生效，检查是否在Angular模块初始化前加载了本地化文件，顺序很重要！
• 如果你用的不是UI Bootstrap的Datepicker，而是其他库（比如jQuery UI Datepicker），那需要用对应的本地化方法，比如：

  $.datepicker.setDefaults($.datepicker.regional['es']);
  

  同时引入jQuery UI的西班牙语本地化文件。

这样应该就能让你的动态日期选择器显示西班牙语的月份和星期了～

内容的提问来源于stack exchange，提问作者Shiva Goud A