Custom localization
You can define your custom utility to localize the day picker – for example to reduce the size of your javascript bundle.
The DayPicker
component uses localeUtils, a small set of functions defining how to display the day picker for the given locale.
You can overwrite its behavior passing a custom set of functions to the localeUtils
props.
Example
The following localeCustomUtils
object is used to localize the calendar in English or in Italian.
const WEEKDAYS_LONG = {
"en": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
"it": ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"]
}
const WEEKDAYS_SHORT = {
"en": ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
"it": ["D", "L", "M", "M", "G", "V", "S"]
const MONTHS = {
"en": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
"it": ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
const localeCustomUtils = {
formatMonthTitle(d, locale) {
return `${MONTHS[locale][d.getMonth()]} ${d.getFullYear()}`;
},
formatWeekdayShort(i, locale) {
return WEEKDAYS_SHORT[locale][i];
},
formatWeekdayLong(i, locale) {
return WEEKDAYS_LONG[locale][i];
},
getFirstDayOfWeek(locale) {
if (locale === "it") {
return 1;
}
return 0;
}
}
function MyComponent() {
return <DayPicker locale="it" localeUtils={ localeCustomUtils } />
}