在vaadin-grid中更改日期格式

Question

我使用angular2将数据库中的日期拖入vaadin-grid（vaadin-table）。我需要的只是MM/DD/YYYY格式。日期过滤器不能在像{{dateOfBirth |。}这样的vaadin-grid中工作日期： '日/月/年'}}。

谢谢！例子对我来说最有意义，因为我对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这样做（抱歉，SO代码片断给了我无法弄清楚的错误...）。

Answer 2

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

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; 
      } 
      }); 
     };