AngularJS/Angular-ui-bootstrap Changing language u

Question

I use the datePicker documented here.

However, no direct option allows to change the language, English by default.

I find a the documentation of the widget provided without angular directive, and it provides a nice way to achieve it:

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

Is there an easy way, avoiding to tweak the original directive's source code, to change it?

Answer 1

If you are using the DatePicker form angular-ui simply add the localized js file in the header of your page. An example would be :

<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>

You can see a working plunker here

Answer 2

You can find locale js files latest version with this link.

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

Also, if you want to translate datepicker action buttons(like 'Close') globaly, you can add this code for global config.

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

Answer 3

First, you have to load your locales (get them here) script after angular in index.html:

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

After that, the days and months are localised but you need to translate the buttons by yourself adding parameters inside the datepicker input tag:

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