---
title: Localization
order: 4
layout: page
---

[[vaadin-date-picker.localization]]
= Localization

The [vaadinelement]#vaadin-date-picker# element can be localized through the [propertyname]#i18n# object.

[source,html]
----
<vaadin-date-picker id="my-picker" label="Birthday"></vaadin-date-picker>
----
[source,javascript]
----
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;
  }
}
----

* [propertyname]#i18n.monthNames# – An array of month names starting from January.
* [propertyname]#i18n.weekdays# – An array of weekday names starting from Sunday. Used in screen reader announcements.
* [propertyname]#i18n.weekdaysShort# – An array of short weekday names starting from Sunday. Displayed in the calendar.
* [propertyname]#i18n.firstDayOfWeek# – An integer indicating the first day of the week (0 = Sunday, 1 = Monday, etc.).
* [propertyname]#i18n.week# – Used in screen reader announcements along with week numbers, if they are displayed.
* [propertyname]#i18n.calendar# – Translation of the Calendar icon button title.
* [propertyname]#i18n.clear# – Translation of the Clear icon button title.
* [propertyname]#i18n.today# – Translation of the Today shortcut button text.
* [propertyname]#i18n.cancel# – Translation of the Cancel button text.
* [propertyname]#i18n.formatDate# – A function to format given [classname]#Date# object as [classname]#String#.
* [propertyname]#i18n.parseDate# – A function to parse given [classname]#String# to a [classname]#Date# object. +
Ensure the parser understands at least the format produced by the [propertyname]#formatDate# function. +
Leaving out the [propertyname]#i18n.parseDate# altogether will disable keyboard input feature.
* [propertyname]#i18n.formatTitle# – A function to format the given monthName and year as a [classname]#String# representation to be placed over a calendar.

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

=== Using Moment.js for Localization

http://momentjs.com/[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 [vaadinelement]#vaadin-date-picker#.
You can assign the [propertyname]#monthNames#, [propertyname]#weekdaysShort#, [propertyname]#firstDayOfWeek# properties directly from Moment.js.
For the [propertyname]#formatDate# function you can create a simple function that delegates the date value formatting.

See the code example below for details.

[source,html]
----
<!-- 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>
----
[source,javascript]
----
// 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(),
  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;
  }
};
----
