私は与えられたアプローチの使用に満足していなかったので、angular-translateと、次のように angular-ui-bootstrap-templates を上書きする可能性を使用して、これを見つけ出しました (Source from 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'
また、datepicker の現在の月は(2216 行目){{title}}によって提供されるように元々レンダリングされているため、現在の月をローカライズするためにフィルターを読み込む必要があります (この投稿のおかげで):scope.title = dateFilter(this.activeDate, this.formatDayTitle);ui-bootstrap-tpls.js
/* 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}}'))
;
};
});
このソリューションは、少なくともここで考案された他のハックと同じくらい醜いと思いますが、再描画や同様のものを自分でトリガーする必要はありません。