Skip to main content

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 * as React from 'react';
import es from 'date-fns/locale/es';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
return <DayPicker locale={es} />;
}
Output
marzo 2021
lunes.martes.miércoles.jueves.viernes.sábado.domingo.
1st March (Monday)
2nd March (Tuesday)
3rd March (Wednesday)
4th March (Thursday)
5th March (Friday)
6th March (Saturday)
7th March (Sunday)
8th March (Monday)
9th March (Tuesday)
10th March (Wednesday)
11th March (Thursday)
12th March (Friday)
13th March (Saturday)
14th March (Sunday)
15th March (Monday)
16th March (Tuesday)
17th March (Wednesday)
18th March (Thursday)
19th March (Friday)
20th March (Saturday)
21st March (Sunday)
22nd March (Monday)
23rd March (Tuesday)
24th March (Wednesday)
25th March (Thursday)
26th March (Friday)
27th March (Saturday)
28th March (Sunday)
29th March (Monday)
30th March (Tuesday)
31st March (Wednesday)

Right-to-left direction#

To add right-to-left text direction, set the dir prop to rtl.

import * as React from 'react';
import arabic from 'date-fns/locale/ar-SA';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
return <DayPicker dir="rtl" locale={arabic} />;
}
Output
مارس 2021
الأحد.الاثنين.الثلاثاء.الأربعاء.الخميس.الجمعة.السبت.
1st March (Monday)
2nd March (Tuesday)
3rd March (Wednesday)
4th March (Thursday)
5th March (Friday)
6th March (Saturday)
7th March (Sunday)
8th March (Monday)
9th March (Tuesday)
10th March (Wednesday)
11th March (Thursday)
12th March (Friday)
13th March (Saturday)
14th March (Sunday)
15th March (Monday)
16th March (Tuesday)
17th March (Wednesday)
18th March (Thursday)
19th March (Friday)
20th March (Saturday)
21st March (Sunday)
22nd March (Monday)
23rd March (Tuesday)
24th March (Wednesday)
25th March (Thursday)
26th March (Friday)
27th March (Saturday)
28th March (Sunday)
29th March (Monday)
30th March (Tuesday)
31st March (Wednesday)

Numbering system#

Use formatters to change the numbering system used in the calendar.

For example, to switch to hindu-arabic using toLocaleString:

import * as React from 'react';
import { format } from 'date-fns';
import arabic from 'date-fns/locale/ar-SA';
import {
DateFormatter,
DayPicker,
WeekNumberFormatter
} from 'react-day-picker';
import 'react-day-picker/style.css';
export default function Example() {
const nuLocale = 'ar-u-nu-arab';
const formatDay: DateFormatter = (day) =>
day.getDate().toLocaleString(nuLocale);
const formatWeekNumber: WeekNumberFormatter = (weekNumber) =>
weekNumber.toLocaleString(nuLocale);
const formatCaption: DateFormatter = (date, { locale }) => {
const y = date.getFullYear().toLocaleString(nuLocale);
const m = format(date, 'LLLL', { locale });
return `${m} ${y}`;
};
return (
<DayPicker
locale={arabic}
dir="rtl"
showWeekNumber
formatters={{ formatDay, formatCaption, formatWeekNumber }}
/>
);
}
Output
مارس 2,021
الأحد.الاثنين.الثلاثاء.الأربعاء.الخميس.الجمعة.السبت.
10
1st March (Monday)
2nd March (Tuesday)
3rd March (Wednesday)
4th March (Thursday)
5th March (Friday)
6th March (Saturday)
11
7th March (Sunday)
8th March (Monday)
9th March (Tuesday)
10th March (Wednesday)
11th March (Thursday)
12th March (Friday)
13th March (Saturday)
12
14th March (Sunday)
15th March (Monday)
16th March (Tuesday)
17th March (Wednesday)
18th March (Thursday)
19th March (Friday)
20th March (Saturday)
13
21st March (Sunday)
22nd March (Monday)
23rd March (Tuesday)
24th March (Wednesday)
25th March (Thursday)
26th March (Friday)
27th March (Saturday)
14
28th March (Sunday)
29th March (Monday)
30th March (Tuesday)
31st March (Wednesday)