Localization

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

Prop Name	Type	Description
locale	Locale	Set the locale. Default is en-US.
weekStartsOn	1 | 2 | 3 | 4 | 5 | 6 | 7	Change the first day of the week.
firstWeekContainsDate	1 | 4	Configure the first date in the first week of the year.
timeZone	string	The time zone (IANA or UTC offset) to use in the calendar.
ISOWeek	boolean	Switch to ISO Week Dates.
broadcastCalendar	boolean	Switch to the US Broadcast Calendar.
jalali	boolean	Switch to the Jalali calendar.

Setting the Locale

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

Changing the Time Zone

See Time Zone docs for more information.

Localization Options

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

ISO Week Dates

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

<DayPicker ISOWeek />

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

Jalali Calendar

DayPicker supports the Jalali calendar through the date-fns-jalali package. To switch to the Jalali calendar, add date-fns-jalali to your dependencies and import DayPicker from react-day-picker/jalali.

1. Install the date-fns-jalali package

npm

npm install date-fns-jalali

Yarn

yarn add date-fns-jalali

pnpm

pnpm add date-fns-jalali

2. Import DayPicker from react-day-picker/jalali

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

3. Use DayPicker as usual

By defaults, Jalali DayPicker uses the Persian/Farsi locale (Iran) and a dir from right to left.

./JalaliCalendar.jsx

import React from "react";

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

export function Jalali() {
  return <DayPicker mode="single" />;
}