Localization
Changing locale
To change the locale, pass to the locale
prop a date-fns Locale object.
For example, to localize the calendar in Spanish, import the locale object from date-fns and pass it to the component:
import React from 'react';
import { es } from 'date-fns/locale';
import { DayPicker } from 'react-day-picker';
export default function App() {
return <DayPicker locale={es} />;
}
Overriding the first day of the week
Use the weekStartsOn
prop to change the first day of the week:
import React from 'react';
import { es } from 'date-fns/locale';
import { DayPicker } from 'react-day-picker';
export default function App() {
return <DayPicker locale={es} weekStartsOn={0} />;
}
First week of the year
To override the date in the first week of the year, use firstWeekContainsDate
. Use this prop to change the week number calculation according to date-fns getWeek function.
import React from 'react';
import { DayPicker } from 'react-day-picker';
export default function App() {
return (
<DayPicker
showWeekNumber
weekStartsOn={2} // Tuesday as first day of the week
firstWeekContainsDate={4} // Number the first week of the year from day 4
formatters={{
// Add `W` prefix to week number
formatWeekNumber: (weekNumber) => `W${weekNumber}`
}}
/>
);
}
Switching to ISO week dates
By default, week numbers and week days follow the DayPicker's locale. Use the ISOWeek
prop to switch to ISO week dates.
import React from 'react';
import { DayPicker } from 'react-day-picker';
export default function App() {
return <DayPicker ISOWeek showWeekNumber showOutsideDays />;
}
Switching to right-to-left direction
To add right-to-left text direction, set the dir
prop to rtl
.
import React from 'react';
import { arSA } from 'date-fns/locale';
import { DayPicker } from 'react-day-picker';
export default function App() {
return <DayPicker dir="rtl" locale={arSA} />;
}
Other numbering systems
Use formatters to change the numbering system used in the calendar.
For example, to switch to hindu-arabic using toLocaleString:
import React from 'react';
import { format } from 'date-fns';
import { arSA } from 'date-fns/locale';
import {
DateFormatter,
DayPicker,
WeekNumberFormatter
} from 'react-day-picker';
const NU_LOCALE = 'ar-u-nu-arab';
const formatDay: DateFormatter = (day) =>
day.getDate().toLocaleString(NU_LOCALE);
const formatWeekNumber: WeekNumberFormatter = (weekNumber) => {
return weekNumber.toLocaleString(NU_LOCALE);
};
const formatCaption: DateFormatter = (date, options) => {
const y = date.getFullYear().toLocaleString(NU_LOCALE);
const m = format(date, 'LLLL', { locale: options?.locale });
return `${m} ${y}`;
};
export default function App() {
return (
<DayPicker
locale={arSA}
dir="rtl"
showWeekNumber
formatters={{ formatDay, formatCaption, formatWeekNumber }}
/>
);
}
ARIA labels translations
Use the labels prop to translate the labels used for ARIA.