changing-locale.mdx

DayPicker can localize month names, weekday labels, and other text using the locales provided by date-fns. All locales are exported from @daypicker/react/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 "@daypicker/react";
import { es } from "@daypicker/react/locale";

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

Language tag on the root element

DayPicker sets the root element lang attribute from the active locale code (locale.code).

If you need a different language tag, pass the lang prop explicitly.

import { arSA } from "@daypicker/react/locale";

<DayPicker locale={arSA} />;

You can target locale-specific styles with the CSS :lang(...) selector:

.rdp-root:lang(ar) {
  font-family: "Noto Naskh Arabic", serif;
}

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 "@daypicker/react";
import { hi } from "@daypicker/react/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 "@daypicker/react/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} />