在vaadin-grid中更改日期格式

Question

我使用angular2将一个日期从数据库中拉入到vaadin-grid(vaadin-table)中。我只需要MM/DD/YYYY格式。日期过滤器在vaadin网格中不起作用，如{{dateOfBirth | date:'dd/mm/yyyy'}}。

谢谢!示例对我来说是最有意义的，因为我对vaadin非常陌生。

Answer 1

我不是Vaadin聚合物和angular2的专家，因为我主要使用经典的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，它就是这样做的(对不起，代码片段给出了一个我无法理解的错误……)。

Answer 2

设置为选择日期时输入的日期的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;
             }
           });
         };