Localization

DayPicker provides various options to customize the calendar for different languages and regions.

• For time zone support, see the Time Zone guide.

Setting the Locale

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

DayPicker supports all the locales included in the date-fns library.

To change the default en-US to another locale, import a locale object from react-day-picker/locale and pass it to the locale prop.

// Import the locale object
import { es } from "react-day-picker/locale";

// Use the locale object
<DayPicker locale={es} />;

Customizing the Locale

You can customize the locale by passing an object with the desired translations. Use the defaultLocale object for the default translation values.

import { DayPicker, defaultLocale } from "react-day-picker";

<DayPicker
  locale={{
    localize: {
      ...defaultLocale.localize,
      day: (day) => "custom-localized-day",
    },
  }}
  month={new Date(2023, 0, 1)}
  mode="single"
/>;

ISO 8601 Calendar

Prop Name	Type	Description
ISOWeek	boolean	Switch to ISO Week Dates.

Use the ISOWeek prop to switch to ISO Week Dates instead of the locale setting.

<DayPicker ISOWeek />

Persian Calendar

DayPicker supports the Persian Solar Hijri calendar through the date-fns-jalali package.

To use the Persian calendar, import DayPicker from react-day-picker/persian:

- import { DayPicker } from 'react-day-picker';
+ import { DayPicker } from 'react-day-picker/persian';

English (US) Locale

By default, the Persian calendar uses the Farsi (Iran) locale and the Eastern Arabic-Indic (Persian) number system.

To use the English (US) locale, import it and pass the locale prop. To change the numerals to Western Arabic, use the numerals prop.

import { DayPicker, enUS } from "react-day-picker/persian";

export function PersianEn() {
  return <DayPicker locale={enUS} numerals="latn" />;
}

Formatting Persian Dates

The calendar always returns Gregorian dates. Use the exported getDateLib getter to format dates to the Persian calendar.

import { DayPicker, getDateLib } from "react-day-picker/persian";

export function PersianCalendar() {
  const [selected, setSelected] = React.useState(new Date());
  const dateLib = getDateLib();
  return (
    <DayPicker
      mode="single"
      selected={selected}
      required
      onSelect={setSelected}
      footer={`Selected: ${dateLib.format(selected)}`}
    />
  );
}

Buddhist (Thai) Calendar

DayPicker supports the Buddhist (Thai) calendar, which follows Gregorian months and weeks but displays years in the Buddhist Era (BE = CE + 543).

• To use the Buddhist calendar, import DayPicker from react-day-picker/buddhist:

- import { DayPicker } from 'react-day-picker';
+ import { DayPicker } from 'react-day-picker/buddhist';

By default, the Buddhist calendar uses the Thai locale and Thai numerals. You can switch numerals to Western Arabic with numerals="latn" and use another locale such as English (US):

import { DayPicker, enUS } from "react-day-picker/buddhist";

export function BuddhistEn() {
  return <DayPicker locale={enUS} numerals="latn" />;
}

Ethiopic Calendar

DayPicker supports the Ethiopic calendar, which is the principal calendar used in Ethiopia and Eritrea.

• To use the Ethiopic calendar, import DayPicker from react-day-picker/ethiopic:

- import { DayPicker } from 'react-day-picker';
+ import { DayPicker } from 'react-day-picker/ethiopic';

Numerals

By default, the Ethiopic calendar uses Ge'ez numerals.

• To use the Latin numeral system, pass the numerals prop:

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

export function EthiopicLatin() {
  return <DayPicker numerals="latn" />;
}

Hebrew Calendar

DayPicker supports the Hebrew calendar, a lunisolar calendar used for Jewish religious observances and holidays.

• To use the Hebrew calendar, import DayPicker from react-day-picker/hebrew:

- import { DayPicker } from 'react-day-picker';
+ import { DayPicker } from 'react-day-picker/hebrew';

By default, the Hebrew calendar uses the Hebrew locale, renders right-to-left, and keeps Western Arabic numerals for clarity. You can switch to English labels by passing the enUS locale and dir="ltr":

import { DayPicker, enUS } from "react-day-picker/hebrew";

export function HebrewEn() {
  return <DayPicker locale={enUS} dir="ltr" numerals="latn" />;
}

Broadcast Calendar

Prop Name	Type	Description
broadcastCalendar	boolean	Switch to the US Broadcast Calendar.

Switch to the US Broadcast Calendar by setting the broadcastCalendar prop.

In the broadcast calendar, weeks start on Monday and end on Sunday. Each month has either 28 or 35 days.

<DayPicker broadcastCalendar />

Advanced Localization Options

Prop Name	Type	Description
firstWeekContainsDate	1 | 4	Configure the first date in the first week of the year.
weekStartsOn	1 | 2 | 3 | 4 | 5 | 6 | 7	Change the first day of the week.

First Date of the Week

Use the weekStartsOn prop to set the first day of the week.

<DayPicker weekStartsOn={0} /> // Start the week on Sunday

First Week Contains Date

The firstWeekContainsDate prop sets the first day of the year's initial week, which is used to calculate week numbers. Acceptable values are 1 for Monday and 4 for Thursday.

For more information, see Week Numbering on Wikipedia and the getWeek function from date-fns.

<DayPicker
  showWeekNumber
  firstWeekContainsDate={1} // First week must contain Monday
/>