Changing the Locale

DayPicker can localize month names, weekday labels, and other text using the locales provided by date-fns. All locales are exported from react-day-picker/locale.

By default, DayPicker uses the English (US) locale (en-US). You can override this via the locale prop.

Prop Name	Type	Description
locale	Locale	Set the locale. Default is en-US.

For example, to set the calendar to Spanish, import the es locale and pass it to the locale prop:

import { DayPicker } from "react-day-picker";
import { es } from "react-day-picker/locale";

export function Spanish() {
  return <DayPicker locale={es} />;
}

Numerals

Use the numerals prop to select the numbering system used by labels and formatters (for example, latn, arab, thai). Locale label translations also respect the numerals you choose.

Prop Name	Type	Description
numerals	Numerals	Numbering system for labels and formatted text.

import { DayPicker } from "react-day-picker";
import { hi } from "react-day-picker/locale";

export function HindiWithDevanagariNumerals() {
  return <DayPicker locale={hi} numerals="deva" />;
}

RTL text direction

Set the text direction to right-to-left with the dir prop.

import { arSA } from "react-day-picker/locale";

<DayPicker locale={arSA} dir="rtl" />;

Override week settings

You can override week-related settings even when they differ from the defaults for the current locale.

Prop Name	Type	Description
weekStartsOn	0 | 1 | ... | 6	First day of the week (0 = Sunday, 1 = Monday, etc.).
firstWeekContainsDate	1 | 2 | ... | 7	January day that must fall in the first week of the year.

<DayPicker weekStartsOn={1} firstWeekContainsDate={4} />