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} />;
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
.
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
- Yarn
- pnpm
npm install date-fns-jalali
yarn add date-fns-jalali
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
You can set the right-to-left direction and change the locale as needed.
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" />;
}