Datumsformat in vaadin-grid ändern

Question

Ich ziehe ein Date aus einer Datenbank in das vaadin-grid (vaadin-table) mit angular2. Alles, was ich brauche, ist MM/DD/YYYY Format. Die Datumsfilter funktionieren nicht im Vaadin-Grid wie {{dateOfBirth | Datum: 'TT/MM/JJJJ'}}.

Vielen Dank! Beispiele sind für mich am sinnvollsten, da ich Vaadin sehr neu bin.

Answer 1

Ich bin kein Experte in Vaadin Polymer & angular2, weil ich meist mit klassischen Vaadin gearbeitet, aber bei their samples (currently line 182) suchen, es sieht aus wie Sie einen Renderer zur Verfügung stellen können. Die expanse manager demo hat eine Date als erste Spalte und in den Quellen können Sie den Renderer als auch, mit der moment.js Bibliothek sehen:

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

, die erzeugt:

Wenn Sie ein nehmen Schauen Sie sich moment.js's formatting options an, Sie können es ändern, wie Sie möchten, zum Beispiel DD/MM/YYYY. Hier ist eine grundlegende JSFiddle macht nur das (Entschuldigung, SO Code-Snippet gab einen Fehler, den ich nicht herausfinden konnte ...).

Answer 2

Formatierung auf DD/MM/YYYY der vaadin-Datumseingabe bei Auswahl eines Datums (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; 
      } 
      }); 
     };