在角度 ui-grid 中向 ui-datepicker 添加翻译答案

【问题标题】：add traduction to ui-datepicker in angular ui-grid在角度 ui-grid 中向 ui-datepicker 添加翻译
【发布时间】：2017-03-03 14:21:01
【问题描述】：

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

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap angular-ui-grid angular-ui-datepicker

【解决方案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> 请查看此plunker 了解结果

【讨论】：

【解决方案2】：

在深入了解 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;
    },

您将其更改为（注意我添加了带有参数的 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 设置为您想要的任何内容，例如使用 angular-translate 模块（我没有将它添加到 plunker）：

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

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

【讨论】：

请您在 plunker 上更新一下，我不明白您的意思。