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

I am using datePicker documentation here .

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

I find documentation on widgets provided without the angular directive, and it provides a good way to achieve it:

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

Is there a simple way of not allowing you to change the source code of a directive to change it?

+42
angularjs angular-ui-bootstrap
Oct 30 '13 at 0:51
source share
3 answers

If you use the DatePicker angular -ui form, simply add the localized js file to your page title. An example is:

<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.imtqy.com/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> 

You can see the working plank here

+84
30 Oct. '13 at 7:31
source share

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 localized, but you need to translate the buttons yourself by adding parameters inside the date 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" /> 
+17
Feb 16 '15 at 11:24
source share

You can find the latest locale js file with this link.

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

In addition, if you want to translate the datepicker action buttons (for example, "Close") globaly, you can add this code for the global configuration.

 //DatePicker -> uibDatepickerConfig //DatePickerPopup -> uibDatepickerPopupConfig app.config(['uibDatepickerPopupConfig', function(uibDatepickerPopupConfig) { uibDatepickerPopupConfig.closeText = 'Close'; uibDatepickerPopupConfig.currentText = 'Today'; uibDatepickerPopupConfig.clearText = 'Clear'; }]); 
+2
Aug 04 '17 at 12:57 on
source share



All Articles