Добавить traduction для пользовательского интерфейса даты в угловой пользовательской сети

Question

Есть ли способ перевести кнопку в угловой UI-DatePicker в этом примере плунжера. Я пытался добавить close-text="{{\'lblClose\' | translate}}" current-text="{{\'lblToday\' | translate}}" clear-text="{{\'lblClear\' | translate}}" как и другой Angular UI-DatePicker, но он не работает. любая помощь действительно ценится

Answer 1

Вы можете сделать это, просто обновив директиву следующим образом <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>Пожалуйста, смотрите этот плункер для результата

Answer 2

Посмотрев более подробно на то, как работает ui-grid-datepicker, я нашел грязное решение (я не думаю, что есть чистое решение)

Вы можете увидеть плункер здесь, где я изменил текст кнопки закрытия: http://plnkr.co/edit/za99R9wUOcM2s2EkHLsv?p=preview

Проблема в том, что параметр для изменения кнопки "Готово" должен быть применен к элементу, который имеет директиву "uib-datepicker-popup"

Поэтому, если вы хотите изменить метку кнопки "Готово", вам нужно изменить библиотеку ui-grid-settings (что не является хорошим решением, но я не вижу другого пути).

из этого:

    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;
    },

Вы изменяете его на (обратите внимание, что я добавил атрибут close-text с параметром):

    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;
    },

А затем в вашем главном файле app.js, из этого:

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

вы измените его на:

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

Осталось только установить переменную closeLabelTranslated на то, что вы хотите, например, с помощью модуля углового перевода (я не добавил это к плункеру):

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

Как я уже говорил, это грязное решение, но кажется, что ui-grid-edit-datepicker не предоставляет вам эту опцию, поэтому вы должны добавить ее вручную