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 thelocale 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 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)}`}
    />
  );
}

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
/>