web-dev-qa-db-ja.com

AngularJS / Angular-ui-bootstrap datePickerで使用される言語の変更

here で文書化されているdatePickerを使用します。

ただし、言語を変更する直接オプションはありません英語デフォルトで。

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

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

元のディレクティブのソースコードを変更せずに変更する簡単な方法はありますか?

48
Mik378

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>

あなたは働くプランカーを見ることができます ここ

90
Nicolas ABRIC

最初に、index.htmlでangular=の後にロケールをロードする必要があります( ここで取得 )スクリプト:

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

その後、日と月はローカライズされますが、datepicker入力タグ内にパラメーターを追加して、ボタンを翻訳する必要があります。

<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" />
18
Pekka

このリンクを使用して、ロケールjsファイルの最新バージョンを見つけることができます。

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

また、datepickerアクションボタン(「閉じる」など)をグローバルに翻訳する場合は、このコードをグローバル構成に追加できます。

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