vaadin date picker to show month year only

Question

I am using vaadin-date-picker to display the date. It's default format is 6/21/2017. I want to show only month and year. Such as jun 2017 or 6/2017. Any help please?

Answer 1

vaadin-date-picker is using i18n property to localize everything. When declaring vaadin-date-picker element, you can also set i18n property. for Example:

<vaadin-date-picker i18n='[[i18nCustom]]'></vaadin-date-picker>

and then declare property:

i18nCustom: {
    value: function() {
        return  {

      week: 'viikko',
      calendar: 'kalenteri',
      clear: 'tyhjennä',
      today: 'tänään',
      cancel: 'peruuta',
      firstDayOfWeek: 1,
      monthNames: ['tammikuu','helmikuu','maaliskuu','huhtikuu','toukokuu','kesäkuu',
                   'heinäkuu','elokuu','syyskuu','lokakuu','marraskuu','joulukuu'],
      weekdays: 'sunnuntai_maanantai_tiistai_keskiviikko_torstai_perjantai_lauantai'.split('_'),
      weekdaysShort: ['su','ma','ti','ke','to','pe','la'],
      formatDate: function(d) {
        return [d.getMonth() + 1, d.getFullYear()].join('/');
      },
      parseDate: function(text) {
        // This example produces a really strict parser which only accepts
        // perfectly formatted dates like '12.8.2013'. Less strict implementation or
        // a 3rd party parser like in the example below is recommended.
        var parts = text.split('.');
        if (parts.length === 3) {
          var date = new Date(0, 0);
          date.setFullYear(parseInt(parts[2]));
          date.setMonth(parseInt(parts[1]) - 1);
          date.setDate(parseInt(parts[0]));
          return date;
        }
      },
      formatTitle: function(monthName, fullYear) {
        return monthName + ' ' + fullYear;
      }
        }
    }
}

What you are looking for is function formatDate. Where you can edit what should be returned as displayed text