angular - 在 vaadin-grid 中更改日期格式

Question

我正在使用 angular2 将数据库中的日期提取到 vaadin-grid(vaadin-table) 中。我只需要 MM/DD/YYYY 格式。日期过滤器在 vaadin-grid 中不起作用，例如 {{dateOfBirth | 日期：'dd/mm/yyyy'}}。

谢谢！示例对我来说最有意义，因为我对 vaadin 很陌生。

Answer 1

我不是 Vaadin 聚合物和 angular2 方面的专家，因为我主要使用经典的Vaadin，但查看他们的示例（当前为第 182 行），看起来您可以提供渲染器。expanse管理器演示的第一列是 aDate作为它的第一列，在源代码中你也可以看到渲染器，使用moment.js库：

grid.columns[0].renderer = function(cell) {
  cell.element.innerHTML = moment(cell.data).format('MM/DD/YYYY');
};

生成：

如果您查看moment.js的格式选项，您可以将其更改为您喜欢的任何内容，例如DD/MM/YYYY. 这是一个基本的JSFiddle这样做（抱歉，SO 代码片段给出了一个我无法弄清楚的错误......）。

Answer 2

选择日期时格式化为 vaadin-date 输入的 DD/MM/YYYY (vaadin-date-picker)。

toDDMMYYYY = function(dateFromInput){ //DD/MM/YYYY
           dateFromInput.set('i18n.formatDate', function(d) {
             var yearStr = d.getFullYear().toString();
             var dateFormatted =  d.getDate() + '/' + (d.getMonth() + 1) + '/' + yearStr;
             return dateFormatted
           });
           dateFromInput.set('i18n.parseDate', function(t) {
             var parts = t.split('/');
             var today = new Date();
             var date, month = today.getMonth(), year = today.getFullYear();

             if (parts.length === 3) {
               year = parseInt(parts[2]);
               if (parts[2].length < 3 && year >= 0) {
                 year += year < 50 ? 2000 : 1900;
               }
               month = parseInt(parts[1]) - 1;
               date = parseInt(parts[0]);
             } else if (parts.length === 2) {
               month = parseInt(parts[1]) - 1;
               date = parseInt(parts[0]);
             } else if (parts.length === 1) {
               date = parseInt(parts[1]);
             }
             if (date !== undefined) {
               var result = new Date(0, 0); // Wrong date (1900-01-01), but with midnight in local time
               result.setFullYear(year);
               result.setMonth(month);
               result.setDate(date);
               return result;
             }
           });
         };