AngularJS/Angular-ui-bootstrap Changing language used by the datePicker

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

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