Localization
Changing locale
To change the locale, pass to the locale
prop a date-fns Locale object.
For example, to localize the calendar in Spanish, import the locale object from date-fns and pass it to the component:
import React from 'react';
import { es } from 'date-fns/locale';
import { DayPicker } from 'react-day-picker';
export default function App() {
return <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 |
Overriding the first day of the week
Use the weekStartsOn
prop to change the first day of the week:
import React from 'react';
import { es } from 'date-fns/locale';
import { DayPicker } from 'react-day-picker';
export default function App() {
return <DayPicker locale={es} weekStartsOn={0} />;
}
do | lu | ma | mi | ju | vi | sá |
---|---|---|---|---|---|---|
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 of the year
To override the date in the first week of the year, use firstWeekContainsDate
. Use this prop to change the week number calculation according to date-fns getWeek function.
import React from 'react';
import { DayPicker } from 'react-day-picker';
export default function App() {
return (
<DayPicker
showWeekNumber
weekStartsOn={2} // Tuesday as first day of the week
firstWeekContainsDate={4} // Number the first week of the year from day 4
formatters={{
// Add `W` prefix to week number
formatWeekNumber: (weekNumber) => `W${weekNumber}`
}}
/>
);
}
Tu | We | Th | Fr | Sa | Su | Mo | |
---|---|---|---|---|---|---|---|
W39 | 1 | 2 | |||||
W40 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
W41 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
W42 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
W43 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
W44 | 31 |
Switching to ISO week dates
By default, week numbers and week days follow the DayPicker's locale. Use the ISOWeek
prop to switch to ISO week dates.
import React from 'react';
import { DayPicker } from 'react-day-picker';
export default function App() {
return <DayPicker ISOWeek showWeekNumber showOutsideDays />;
}
Mo | Tu | We | Th | Fr | Sa | Su | |
---|---|---|---|---|---|---|---|
39 | 25 | 26 | 27 | 28 | 29 | 30 | 1 |
40 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
41 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
42 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
43 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
44 | 30 | 31 | 1 | 2 | 3 | 4 | 5 |
Switching to right-to-left direction
To add right-to-left text direction, set the dir
prop to rtl
.
import React from 'react';
import { arSA } from 'date-fns/locale';
import { DayPicker } from 'react-day-picker';
export default function App() {
return <DayPicker dir="rtl" locale={arSA} />;
}
أحد | اثنين | ثلاثاء | أربعاء | خميس | جمعة | سبت |
---|---|---|---|---|---|---|
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 |
Other numbering systems
Use formatters to change the numbering system used in the calendar.
For example, to switch to hindu-arabic using toLocaleString:
import React from 'react';
import { format } from 'date-fns';
import { arSA } from 'date-fns/locale';
import {
DateFormatter,
DayPicker,
WeekNumberFormatter
} from 'react-day-picker';
const NU_LOCALE = 'ar-u-nu-arab';
const formatDay: DateFormatter = (day) =>
day.getDate().toLocaleString(NU_LOCALE);
const formatWeekNumber: WeekNumberFormatter = (weekNumber) => {
return weekNumber.toLocaleString(NU_LOCALE);
};
const formatCaption: DateFormatter = (date, options) => {
const y = date.getFullYear().toLocaleString(NU_LOCALE);
const m = format(date, 'LLLL', { locale: options?.locale });
return `${m} ${y}`;
};
export default function App() {
return (
<DayPicker
locale={arSA}
dir="rtl"
showWeekNumber
formatters={{ formatDay, formatCaption, formatWeekNumber }}
/>
);
}
أحد | اثنين | ثلاثاء | أربعاء | خميس | جمعة | سبت | |
---|---|---|---|---|---|---|---|
٤٠ | ١ | ٢ | ٣ | ٤ | ٥ | ٦ | ٧ |
٤١ | ٨ | ٩ | ١٠ | ١١ | ١٢ | ١٣ | ١٤ |
٤٢ | ١٥ | ١٦ | ١٧ | ١٨ | ١٩ | ٢٠ | ٢١ |
٤٣ | ٢٢ | ٢٣ | ٢٤ | ٢٥ | ٢٦ | ٢٧ | ٢٨ |
٤٤ | ٢٩ | ٣٠ | ٣١ |
ARIA labels translations
Use the labels prop to translate the labels used for ARIA.