change date format in vaadin-grid

Question

I'm pulling a Date from a database into the vaadin-grid(vaadin-table) with angular2. All I need is MM/DD/YYYY format. The date filters is not working in the vaadin-grid like {{dateOfBirth | date:'dd/mm/yyyy'}}.

Thank you! Examples make the most sense to me as I'm very new to vaadin.

score 1 · Answer 1 · answered Jul 19 '16 at 14:18

I'm no expert in Vaadin polymer & angular2 because I mostly worked with classic Vaadin but looking at their samples (currently line 182), it looks like you can provide a renderer. The expanse manager demo has a Date as its first column, and in the sources you can see the renderer as well, using the moment.js library:

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

which generates:

If you take a look at moment.js's formatting options you can change it to whatever you like, for example DD/MM/YYYY. Here's a basic JSFiddle doing just that (sorry, SO code snippet gave an error I could not figure out...).

score 0 · Answer 2 · edited Jun 05 '17 at 06:38

Formatting to DD/MM/YYYY of vaadin-date input when selecting a date(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;
             }
           });
         };

change date format in vaadin-grid

2 Answers2