Localization Props
Change the 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 es locale object from date-fns and pass it to the component.
import { es } from "date-fns/locale";
// ...
<DayPicker locale={es} />;Override the First Day of the Week
Use weekStartsOn to override the first day of the week.
<DayPicker weekStartsOn={0} />Set the 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.
<DayPicker firstWeekContainsDate={1} showWeekNumber />Switch to ISO Week Dates
DayPicker uses date-fns getWeek to calculate the week number. By default, the week starts on Sunday and the first week of the year is the one that contains January 1st. Use ISOWeek to switch using ISO Week Dates instead of the locale setting.
<DayPicker ISOWeek showWeekNumber />Translate ARIA labels
Use the labels prop to translate the labels used for ARIA.
TODO: This section is still a draft.
Switch the Text Direction
To add right-to-left text direction, set the dir prop to rtl.
import { arSA } from "date-fns/locale";
<DayPicker locale={es} />;Change the Numbering System
Use formatters to change the numbering system used in the calendar.
For example, to switch to hindu-arabic using toLocaleString:
import { DayPicker, Formatters } from "react-day-picker";
import { format } from "date-fns/format";
import { arSA } from "date-fns/locale";
const NU_LOCALE = "ar-u-nu-arab";
const formatDay: Formatters["formatDay"] = (day) =>
day.getDate().toLocaleString(NU_LOCALE);
const formatWeekNumber: Formatters["formatWeekNumber"] = (weekNumber) => {
return weekNumber.toLocaleString(NU_LOCALE);
};
const formatMonthCaption: Formatters["formatMonthCaption"] = (
date,
options,
) => {
const y = date.getFullYear().toLocaleString(NU_LOCALE);
const m = format(date, "LLLL", { locale: options?.locale });
return `${m} ${y}`;
};
export function NumberingSystem() {
return (
<DayPicker
locale={arSA}
dir="rtl"
showWeekNumber
formatters={{ formatDay, formatMonthCaption, formatWeekNumber }}
/>
);
}