Skip to main content

Localization

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

Prop NameTypeDescription
localeLocaleSet the locale. Default is en-US.
weekStartsOn1 | 2 | 3 | 4 | 5 | 6 | 7Change the first day of the week.
firstWeekContainsDate1 | 4Configure the first date in the first week of the year.
ISOWeekbooleanSwitch to ISO Week Dates.
timeZonestringThe time zone (IANA or UTC offset) to use in the 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} />;
octubre 2024
lumamijuvisádo
123456
78910111213
14151617181920
21222324252627
28293031
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
October 2024
SuMoTuWeThFrSa
12345
6789101112
13141516171819
20212223242526
2728293031

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 />
October 2024
MoTuWeThFrSaSu
40123456
4178910111213
4214151617181920
4321222324252627
4428293031

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.

Experimental Feature

Support for the Jalali calendar is an experimental feature. Please report any issues you encounter. Thank you!

1. Install the date-fns-jalali package​

npm install 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​

You can set the right-to-left direction and change the locale as needed.

./JalaliCalendar.jsx
import React from "react";

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

export function Jalali() {
return <DayPicker mode="single" locale={faIR} dir="rtl" />;
}
جولای 1403
ش1ش2ش3ش4ش5شج