Vaadin Elements - Date Picker - Localization

Localization

The vaadin-date-picker element can be localized through the i18n object.

<vaadin-date-picker id="my-picker" label="Birthday"></vaadin-date-picker>
document.getElementById('my-picker').i18n = {
  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.getDate(), 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;
  }
}
  • i18n.monthNames – An array of month names starting from January.

  • i18n.weekdays – An array of weekday names starting from Sunday. Used in screen reader announcements.

  • i18n.weekdaysShort – An array of short weekday names starting from Sunday. Displayed in the calendar.

  • i18n.firstDayOfWeek – An integer indicating the first day of the week (0 = Sunday, 1 = Monday, etc.).

  • i18n.week – Used in screen reader announcements along with week numbers, if they are displayed.

  • i18n.calendar – Translation of the Calendar icon button title.

  • i18n.clear – Translation of the Clear icon button title.

  • i18n.today – Translation of the Today shortcut button text.

  • i18n.cancel – Translation of the Cancel button text.

  • i18n.formatDate – A function to format given Date object as String.

  • i18n.parseDate – A function to parse given String to a Date object.
    Ensure the parser understands at least the format produced by the formatDate function.
    Leaving out the i18n.parseDate altogether will disable keyboard input feature.

  • i18n.formatTitle – A function to format the given monthName and year as a String representation to be placed over a calendar.

Once set, the i18n property affects how months and dates are displayed in the vaadin-date-picker dropdown as well as the language of the buttons in the element.

Using Moment.js for Localization

Moment.js is a popular JavaScript library for handling date values. It comes bundled with a set of locale data, which can be utilized to provide most of the localization properties for vaadin-date-picker. You can assign the monthNames, weekdaysShort, firstDayOfWeek properties directly from Moment.js. For the formatDate function you can create a simple function that delegates the date value formatting.

See the code example below for details.

<!-- Import Moment.js and the locale(s) needed. -->
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/moment/locale/fi.js"></script>
// Set the Finnish locale.
moment.locale('fi');

// Assign the i18n property with locale data from Moment.js.
document.querySelector('vaadin-date-picker').i18n = {
  monthNames: moment.months(),
  weekdays: moment.weekdays(),
  weekdaysShort: moment.weekdaysShort(),
  firstDayOfWeek: moment.localeData().firstDayOfWeek(),
  week: 'Viikko',
  calendar: 'Kalenteri',
  clear: 'Tyhjennä',
  today: 'Tänään',
  cancel: 'Peruuta',
  formatDate: function(d) {
    return moment(d).format(moment.localeData().longDateFormat('L'));
  },
  parseDate: function(s) {
    return moment(s, moment.localeData().longDateFormat('L')).toDate();
  },
  formatTitle: function(monthName, fullYear) {
    return monthName + ' ' + fullYear;
  }
};