在 vaadin-grid 中更改日期格式答案

【问题标题】：change date format in vaadin-grid在 vaadin-grid 中更改日期格式
【发布时间】：2016-07-19 09:36:32
【问题描述】：

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

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

【问题讨论】：

标签： angular vaadin vaadin-grid

【解决方案1】：

我不是 Vaadin 聚合物和 angular2 方面的专家，因为我主要使用 classic Vaadin，但看着 their samples (currently line 182)，看起来你可以提供渲染器。 expanse manager demo 有一个 Date 作为它的第一列，在源代码中你也可以看到渲染器，使用 moment.js 库：

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

生成：

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

【讨论】：

【解决方案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;
             }
           });
         };

【讨论】：