Question

datepicker（Angle-UI-BootStrap）的文档报告：

使用date filter格式化所有内容，因此也是如此本地化。

检查date filter的文档可以访问AngularJs的i18n and i10n概念。但是，提供的两种方法不能在我的应用程序中使用。这两种方法是：

预先捆绑的规则集

在index.html页面中包含区域设置js脚本

在我的应用程序中，我在登录后检查客户端的语言。所以我的index.html页面已经创建并配置好了。

没有其他方法来翻译datepicker？动态方式......比如更改$ scope的值，改变执行组件转换的接口的颜色？

这是一个plunker，展示了在index.html中引入pt-BR翻译的方法。

更新我在issue of the Angle-UI-Bootstrap中提出了这个问题，这是我从@bekos收到的回复：

@ThCC真正的问题是您无法在此期间更改$ locale 运行时，或者至少我不知道如何做到这一点。即使你使用datepicker解决问题，你仍然会遇到问题每个其他与语言环境相关的过滤器，如货币。我认为它最好在AngularJS问题中提出更一般的问题。

如果有人有其他解决方案，请随时欢迎。如果我得到解决方案，我会回到这里。

Answer 1

有人说[真正的问题是你不能在运行时更改你的$ locale]。事实上你可以。你可以看到一个工作的plunker here。

Answer 2

您可以像这样创建自己的指令：

angular
    .module('myApp.common')
    .directive('datepickerPopupWrap', datepickerPopupWrap);

datepickerPopupWrap.$inject = ['$rootScope'];

function datepickerPopupWrap($rootScope, $compile) {

    return {

        restrict: 'A',
        require: 'ngModel',

        link: function($scope, $element, attrs, ngModel) {
            // Force popup rerender whenever locale changes
            $rootScope.$on('localeChanged', ngModel.$render);
        }
    };

}

指令名必须 datepickerPopupWrap，因此它与呈现弹出窗口的默认ui-bootstrap指令一起执行。

然后，每当您使用angular-dynamic-locale更改区域设置时，请执行以下操作：

tmhDynamicLocale.set(languageKey).then(function() {

    // Set the language in angular-translate
    $translate.use(languageKey);

    // Broadcast the event so datepickers would rerender
    $rootScope.$broadcast('localeChanged');
});

Answer 3

我不满意使用给定的方法，所以我通过使用angular-translate找出了这个，并且有可能覆盖像这样的angular-ui-bootstrap-templates（来自ui-bootstrap-tpls.js）：

uib/template/datepicker/day.html：

angular.module("uib/template/datepicker/day.html", []).run(["$templateCache", function($templateCache) {
    $templateCache.put("uib/template/datepicker/day.html",
        "<table class=\"uib-daypicker\" role=\"grid\" aria-labelledby=\"{{::uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n" +
        "  <thead>\n" +
        "    <tr>\n" +
        "      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left uib-left\" ng-click=\"move(-1)\" tabindex=\"-1\"><i class=\"glyphicon glyphicon-chevron-left\"></i></button></th>\n" +
        "      <th colspan=\"{{::5 + showWeeks}}\"><button id=\"{{::uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm uib-title\" ng-click=\"toggleMode()\" ng-disabled=\"datepickerMode === maxMode\" tabindex=\"-1\"><strong>{{ title | uppercase | localizeMonth }}</strong></button></th>\n" +
        "      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right uib-right\" ng-click=\"move(1)\" tabindex=\"-1\"><i class=\"glyphicon glyphicon-chevron-right\"></i></button></th>\n" +
        "    </tr>\n" +
        "    <tr>\n" +
        "      <th ng-if=\"showWeeks\" class=\"text-center\"></th>\n" +
        "      <th ng-repeat=\"label in ::labels track by $index\" class=\"text-center\"><small aria-label=\"{{::label.full}}\">{{ ('DAY_' + label.abbr | uppercase) | translate}}</small></th>\n" +
        "    </tr>\n" +
        "  </thead>\n" +
        "  <tbody>\n" +
        "    <tr class=\"uib-weeks\" ng-repeat=\"row in rows track by $index\">\n" +
        "      <td ng-if=\"showWeeks\" class=\"text-center h6\"><em>{{ weekNumbers[$index] }}</em></td>\n" +
        "      <td ng-repeat=\"dt in row\" class=\"uib-day text-center\" role=\"gridcell\"\n" +
        "        id=\"{{::dt.uid}}\"\n" +
        "        ng-class=\"::dt.customClass\">\n" +
        "        <button type=\"button\" class=\"btn btn-default btn-sm\"\n" +
        "          uib-is-class=\"\n" +
        "            'btn-info' for selectedDt,\n" +
        "            'active' for activeDt\n" +
        "            on dt\"\n" +
        "          ng-click=\"select(dt.date)\"\n" +
        "          ng-disabled=\"::dt.disabled\"\n" +
        "          tabindex=\"-1\"><span ng-class=\"::{'text-muted': dt.secondary, 'text-info': dt.current}\">{{::dt.label}}</span></button>\n" +
        "      </td>\n" +
        "    </tr>\n" +
        "  </tbody>\n" +
        "</table>\n" +
        "");
}]);

uib/template/datepicker/month.html：

angular.module("uib/template/datepicker/month.html", []).run(["$templateCache", function($templateCache) {
    $templateCache.put("uib/template/datepicker/month.html",
        "<table class=\"uib-monthpicker\" role=\"grid\" aria-labelledby=\"{{::uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n" +
        "  <thead>\n" +
        "    <tr>\n" +
        "      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left uib-left\" ng-click=\"move(-1)\" tabindex=\"-1\"><i class=\"glyphicon glyphicon-chevron-left\"></i></button></th>\n" +
        "      <th><button id=\"{{::uniqueId}}-title\" role=\"heading\" aria-live=\"assertive\" aria-atomic=\"true\" type=\"button\" class=\"btn btn-default btn-sm uib-title\" ng-click=\"toggleMode()\" ng-disabled=\"datepickerMode === maxMode\" tabindex=\"-1\"><strong>{{title}}</strong></button></th>\n" +
        "      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right uib-right\" ng-click=\"move(1)\" tabindex=\"-1\"><i class=\"glyphicon glyphicon-chevron-right\"></i></button></th>\n" +
        "    </tr>\n" +
        "  </thead>\n" +
        "  <tbody>\n" +
        "    <tr class=\"uib-months\" ng-repeat=\"row in rows track by $index\">\n" +
        "      <td ng-repeat=\"dt in row\" class=\"uib-month text-center\" role=\"gridcell\"\n" +
        "        id=\"{{::dt.uid}}\"\n" +
        "        ng-class=\"::dt.customClass\">\n" +
        "        <button type=\"button\" class=\"btn btn-default\"\n" +
        "          uib-is-class=\"\n" +
        "            'btn-info' for selectedDt,\n" +
        "            'active' for activeDt\n" +
        "            on dt\"\n" +
        "          ng-click=\"select(dt.date)\"\n" +
        "          ng-disabled=\"::dt.disabled\"\n" +
        "          tabindex=\"-1\"><span ng-class=\"::{'text-info': dt.current}\">{{ ('MONTH_' + dt.label | uppercase) | translate }}</span></button>\n" +
        "      </td>\n" +
        "    </tr>\n" +
        "  </tbody>\n" +
        "</table>\n" +
        "");
}]);

您还需要扩展您的语言文件（这是针对德语）：

, 'MONTH_JANUARY':                  'Januar'
, 'MONTH_FEBRUARY':                 'Februar'
, 'MONTH_MARCH':                    'März'
, 'MONTH_APRIL':                    'April'
, 'MONTH_MAY':                      'May'
, 'MONTH_JUNE':                     'June'
, 'MONTH_JULY':                     'July'
, 'MONTH_AUGUST':                   'August'
, 'MONTH_SEPTEMBER':                'September'
, 'MONTH_OCTOBER':                  'October'
, 'MONTH_NOVEMBER':                 'November'
, 'MONTH_DECEMBER':                 'December'

由于日期选择器的当前月份被{{title}}（scope.title = dateFilter(this.activeDate, this.formatDayTitle);中的第2216行）原始呈现为ui-bootstrap-tpls.js，因此您必须加载过滤器以本地化当前月份（感谢this post）：

/* global app */
app.filter('localizeMonth', function($interpolate)
{
    return function (input)
    {
        return input
            .replace(/JANUARY/g,   $interpolate('{{ \'MONTH_JANUARY\'   | translate}}'))
            .replace(/FEBRUARY/g,  $interpolate('{{ \'MONTH_FEBRUARY\'  | translate}}'))
            .replace(/MARCH/g,     $interpolate('{{ \'MONTH_MARCH\'     | translate}}'))
            .replace(/APRIL/g,     $interpolate('{{ \'MONTH_APRIL\'     | translate}}'))
            .replace(/MAY/g,       $interpolate('{{ \'MONTH_MAY\'       | translate}}'))
            .replace(/JUNE/g,      $interpolate('{{ \'MONTH_JUNE\'      | translate}}'))
            .replace(/JULY/g,      $interpolate('{{ \'MONTH_JULY\'      | translate}}'))
            .replace(/AUGUST/g,    $interpolate('{{ \'MONTH_AUGUST\'    | translate}}'))
            .replace(/SEPTEMBER/g, $interpolate('{{ \'MONTH_SEPTEMBER\' | translate}}'))
            .replace(/OCTOBER/g,   $interpolate('{{ \'MONTH_OCTOBER\'   | translate}}'))
            .replace(/NOVEMBER/g,  $interpolate('{{ \'MONTH_NOVEMBER\'  | translate}}'))
            .replace(/DECEMBER/g,  $interpolate('{{ \'MONTH_DECEMBER\'  | translate}}'))
        ;
    };
});

我认为这个解决方案至少和这里发明的其他黑客一样丑陋，但你不必自己触发重绘或类似的东西。

如何翻译Angular-UI-Bootstrap datepicker？

3 个答案: