Add i18n to Datepicker

[rsvalerio]

Or, in the meantime, is it possible to translate?

[bekos]

You have to use a locale from AnularJS, since labels are created with the datefilter.

Example: http://plnkr.co/edit/7Fi5rO839elOeJwi5vH2?p=preview

[MattiJarvinen-BA]

@bekos Yes, but I guess he means clear, today and close buttons.

[bekos]

OK I see. If you talk about the popup datepicker, the way to translate the buttons in the bar, is to override the template. I suppose we could add some config for these labels for the next release. What about a PR? :-)

[rsvalerio]

OK I'll try :)

[ThCC]

@bekos There is no other way to translate the datepicker? The only way is modifying the index.html?
In my application I identify the language of the user when it performs login. That is, the index is already configured.

[bekos]

@ThCC The real problem is that you cannot change your $locale during runtime, or at least I don't know of a way to do this. Even if you solve the problem with the datepicker, you will still have problem in every other filter that is locale dependent, like currency.

I think it is better to ask a more general question in the AngularJS issues.

[ThCC]

Thanks for answering @bekos, I'll see what I can do.

[bekos]

You can check this project http://pascalprecht.github.io/angular-translate/ to see if it helps.
In case you find a solution please get back to us :-)

[ThCC]

Again thank you. I'm using this component in the project, but I'll see if I can use it in conjunction with the datepicker. If I succeed I will return to tell you ;)

[vladei]

@ThCC can you tell us if the angular-translate works in conjunction with the datepicker?

[rbaarsma]

It works for the names of days and months, but not the texts Today / Clear / Done

Anyone looking for a quickfix, you can override the config:

var app = angular.module('myapp', ['ui.bootstrap']);
    app.constant('uibDatepickerPopupConfig', {
        datepickerPopup: 'yyyy-MM-dd',
        datepickerPopupTemplateUrl: 'template/datepicker/popup.html',
        datepickerTemplateUrl: 'template/datepicker/datepicker.html',
        html5Types: {
            date: 'yyyy-MM-dd',
            'datetime-local': 'yyyy-MM-ddTHH:mm:ss.sss',
            'month': 'yyyy-MM'
        },
        currentText: 'Vandaag',
        clearText: 'Wissen',
        closeText: 'Klaar',
        closeOnDateSelection: true,
        appendToBody: false,
        showButtonBar: true,
        onOpenFocus: true
    });