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:
Overriding the first day of the week​
Use the weekStartsOn
prop to change the first day of the week:
Switching to right-to-left direction​
To add right-to-left text direction, set the dir
prop to rtl
.
Adopting 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 { DateFormatter, DayPicker, WeekNumberFormatter } from 'react-day-picker'; import { format } from 'date-fns'; import arSA from 'date-fns/locale/ar-SA'; 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.