add traduction to ui-datepicker in angular ui-grid

Question

is there a way to translate the button in the angular ui-datepicker in this plunker example. I tried adding close-text="{{\'lblClose\' | translate}}" current-text="{{\'lblToday\' | translate}}" clear-text="{{\'lblClear\' | translate}}" like the other Angular ui-datepicker but it's not working. any help is really apreciated

Answer 1

you can do it just by updating the directive like this <div class="datepicker-wrapper" ><input uib-datepicker-popup is-open="isOpen" ng-model="' + attrs.rowField + '" ng-change="changeDate($event)" close-text="closeText" current-text="curentText" clear-text="clearText"on-open-focus="false" disabled/></div> Please see this plunker for result

Answer 2

After looking more deeply on how ui-grid-datepicker is working I found a dirty solution (I don't think there is a clean solution)

You can see a plunker here where I changed the text of the close button: http://plnkr.co/edit/za99R9wUOcM2s2EkHLsv?p=preview

THe problem is that the setting to change the Done button must be applied on the element that has the directive "uib-datepicker-popup"

So if you want to modify the label of the Done button you have to change the library of ui-grid-settings (which is not a good solution but I don't see any other way).

from this:

    template: function(element, attrs) {
        var html = '<div class="datepicker-wrapper" ><input uib-datepicker-popup is-open="isOpen" ng-model="' + attrs.rowField + '" ng-change="changeDate($event)" on-open-focus="false" disabled/></div>';
        return html;
    },

You change it to (notice I added the close-text attribute with a paramter) :

    template: function(element, attrs) {
        var html = '<div class="datepicker-wrapper" ><input uib-datepicker-popup is-open="isOpen" close-text="' + attrs.closeLabel + '"  ng-model="' + attrs.rowField + '" ng-change="changeDate($event)" on-open-focus="false" disabled/></div>';
        return html;
    },

And then in your main file app.js, from this:

editableCellTemplate: '<div><form name="inputForm"><div ui-grid-edit-datepicker row-field="MODEL_COL_FIELD" ng-class="\'colt\' + col.uid"></div></form></div>'

you change it to :

editableCellTemplate: '<div><form name="inputForm"><div ui-grid-edit-datepicker close-label="' + closeLabelTranslated  + '" row-field="MODEL_COL_FIELD" ng-class="\'colt\' + col.uid"></div></form></div>'

The only thing remaining is to set your variable closeLabelTranslated to whatever you want, for instance using angular-translate module (I didn't add this to the plunker):

 var closeLabelTranslated = $filter('translate')('DONE');

Like I said this is dirty solution but it seems ui-grid-edit-datepicker doesn't provide you with this option so you have to add it manually