Localization
react-day-picker can be localized into any language (English being the default). You can either:
- use the localization props – see the example below
- use moment.js translations strings, in case you are already including it in your project
For more advanced options, such as changing how days and captions are displayed, see advanced localization.
Localization props
Use locale
, weekdaysLong
andweekdaysShort
props with your own translation strings. Use firstDayOfWeek
to set the first day of the week.
Example
The following example translates the calendar in Italian:
Code
import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
const MONTHS = [
'Gennaio',
'Febbraio',
'Marzo',
'Aprile',
'Maggio',
'Giugno',
'Luglio',
'Agosto',
'Settembre',
'Ottobre',
'Novembre',
'Dicembre',
];
const WEEKDAYS_LONG = [
'Domenica',
'Lunedì',
'Martedì',
'Mercoledì',
'Giovedì',
'Venerdì',
'Sabato',
];
const WEEKDAYS_SHORT = ['Do', 'Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa'];
export default function Italian() {
return (
<DayPicker
locale="it"
months={MONTHS}
weekdaysLong={WEEKDAYS_LONG}
weekdaysShort={WEEKDAYS_SHORT}
firstDayOfWeek={1}
/>
);
}
Result
Localization with moment.js
If you already include moment.js in your dependencies, you may find convenient to use moment’s translation strings.
How to use moment.js to localize the calendar
- make sure
moment
is included in your dependencies - make sure the required moment’s locale data is available when rendering react-day-picker
- import
MomentLocaleUtils
fromreact-day-picker/moment
and pass it to thelocaleUtils
props - use the
locale
prop to set the locale in react-day-picker
Example
The following example shows how to localize the calendar in English, Japanese, Arabic and Italian:
Code
import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
// Include the locale utils designed for moment
import MomentLocaleUtils from 'react-day-picker/moment';
// Make sure moment.js has the required locale data
import 'moment/locale/ja';
import 'moment/locale/ar';
import 'moment/locale/it';
export default class LocalizedExample extends React.Component {
constructor(props) {
super(props);
this.handleSelectChange = this.handleSelectChange.bind(this);
this.state = {
locale: 'en',
};
}
handleSelectChange(e) {
this.setState({
locale: e.target.value,
});
}
render() {
return (
<div>
<p>
<select onChange={this.handleSelectChange}>
<option value="en">English</option>
<option value="ja">Japanese</option>
<option value="ar">Arabic</option>
<option value="it">Italian</option>
</select>
</p>
<DayPicker localeUtils={MomentLocaleUtils} locale={this.state.locale} />
</div>
);
}
}
Result
Advanced localization
Internally, react-day-picker uses LocaleUtils, a set of formatting functions. You can overwrite its behavior by passing your own custom functions to the localeUtils
props.
Code
import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
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 FIRST_DAY = {
en: 0,
it: 1, // Use Monday as first day of the week
};
function formatDay(d, locale = 'en') {
return `${WEEKDAYS_LONG[locale][d.getDay()]}, ${d.getDate()} ${
MONTHS[locale][d.getMonth()]
} ${d.getFullYear()}`;
}
function formatMonthTitle(d, locale = 'en') {
return `${MONTHS[locale][d.getMonth()]} ${d.getFullYear()}`;
}
function formatWeekdayShort(i, locale) {
return WEEKDAYS_SHORT[locale][i];
}
function formatWeekdayLong(i, locale) {
return WEEKDAYS_SHORT[locale][i];
}
function getFirstDayOfWeek(locale) {
return FIRST_DAY[locale];
}
const localeUtils = {
formatDay,
formatMonthTitle,
formatWeekdayShort,
formatWeekdayLong,
getFirstDayOfWeek,
};
export default function MyComponent() {
return <DayPicker locale="it" localeUtils={localeUtils} />;
}