May 11, 2014

Translate Angular-UI DatePicker - text and popup buttons too

You might want to Angular-UI date picker in your own language instead of default english.
Fortunately, guys at Angular-UI team did the job well and used i18n angular system.

All you have to do is to include the correct language pack :

...
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="https://code.angularjs.org/1.0.2/i18n/angular-locale_fr-fr.js"></script>
...


There's still the popup action buttons that are not translated.
As stated in the doc, you can configure the text displayed in those buttons by altering the datepickerPopupConfig global object default values :


// INJECT GLOBAL DATE PICKER POPUP CONFIG
var DatepickerDemoCtrl = function ($scope, datepickerPopupConfig) {
...
// TRANSLATION HERE
datepickerPopupConfig.currentText = 'Aujourd\'hui';
datepickerPopupConfig.clearText = 'Effacer';
datepickerPopupConfig.closeText = 'Fermer';
...
}
Here's a Plunkr for demoing purpose.

Hope this help !

No comments:

Post a Comment