AngularJS/Angular-ui-bootstrap datePickerが使用する言語を変更する。

私は、こちらで説明されているdatePickerを使用しています。

しかし、言語を変更する直接的なオプションはなく、デフォルトでは English となっています。

私は、angularディレクティブなしで提供されるウィジェットのドキュメントを見つけ、それはそれを達成するための素晴らしい方法を提供します:

http://bootstrap-datepicker.readthedocs.org/en/latest/i18n.html

元のディレクティブのソースコードに手を加えることなく、簡単に変更する方法はないでしょうか?

ソリューション

DatePickerフォームangular-uiを使用している場合、ローカライズされたjsファイルをページのヘッダーに追加するだけです。例としては、以下のようになります:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://code.angularjs.org/1.0.8/i18n/angular-locale_fr-fr.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>

動作するプランカーは こちら でご覧いただけます。

解説 (3)

まず、index.htmlでangularの後にloces(get them here) スクリプトをロードする必要があります:

 <script src="angular.js"></script>
 <script src="angular-locale_de-de.js"></script>

その後、日や月はローカライズされますが、ボタンは自分で翻訳する必要があり、datepicker inputタグの中にパラメータを追加します:

<input type="text" class="form-control" datepicker-popup="dd.MM.yyyy"
ng-model="dt" is-open="opened" min-date="minDate" max-date="'2042-04-02'"
datepicker-options="dateOptions" date-disabled="disabled(date, mode)" 
ng-required="true" 
current-text="Tonight" clear-text="Reset" close-text="Exit" />
解説 (2)

ロケールjsファイルの最新版は、こちらのリンクからご覧いただけます。

https://cdnjs.com/libraries/angular-i18n

また、datepickerのアクションボタン('Close')をグローバルに翻訳したい場合は、グローバル設定にこのコードを追加してください。

//DatePicker -> uibDatepickerConfig
//DatePickerPopup -> uibDatepickerPopupConfig
app.config(['uibDatepickerPopupConfig', function(uibDatepickerPopupConfig) {
uibDatepickerPopupConfig.closeText = 'Close';
uibDatepickerPopupConfig.currentText = 'Today';
uibDatepickerPopupConfig.clearText = 'Clear';
}]);
解説 (1)