在 angular ui-grid 中添加翻译到 ui-datepicker

Question

有没有办法翻译 angular ui-datepicker 在这个 plunker 例子中的按钮。我尝试像其他 Angular ui-datepicker 一样添加 close-text="{{\'lblClose\' | translate}}" current-text="{{\'lblToday\' | translate}}" clear-text="{{\'lblClear\' | translate}}" 但它不起作用。非常感谢任何帮助

Answer 1

在更深入地了解 ui-grid-datepicker 的工作原理后，我发现了一个肮脏的解决方案（我认为没有干净的解决方案）

你可以在这里看到一个 plunker，我在其中更改了关闭按钮的文本： 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;
    },

您将其更改为（注意我添加了带参数的关闭文本属性）：

    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 设置为任何你想要的，例如使用 angular-translate 模块（我没有将它添加到 plunker）：

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

就像我说的那样，这是一个肮脏的解决方案，但似乎 ui-grid-edit-datepicker 没有为您提供此选项，因此您必须手动添加它

Answer 2

你可以像这样更新指令来做到这一点 <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> 请查看此 plunker 以获得结果

在 angular ui-grid 中添加翻译到 ui-datepicker

add traduction to ui-datepicker in angular ui-grid

javascript

angularjs

angular-ui-bootstrap

angular-ui-grid

angular-ui-datepicker