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