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. |
ISOWeek | boolean | Switch to ISO Week Dates. |
timeZone | string | The 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} />;
lu | ma | mi | ju | vi | sá | do |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
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
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
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 />
Mo | Tu | We | Th | Fr | Sa | Su | |
---|---|---|---|---|---|---|---|
40 | 1 | 2 | 3 | 4 | 5 | 6 | |
41 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
42 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
43 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
44 | 28 | 29 | 30 | 31 |
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" />;
}
ش | 1ش | 2ش | 3ش | 4ش | 5ش | ج |
---|---|---|---|---|---|---|