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 React from 'react';

import { es } from 'date-fns/locale';
import { DayPicker } from 'react-day-picker';

export default function App() {
return <DayPicker locale={es} />;
}
lumamijuvido

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} />;
}
dolumamijuvi

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}`
}}
/>
);
}
TuWeThFrSaSuMo
W48
W49
W50
W51
W52

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 />;
}
MoTuWeThFrSaSu
48
49
50
51
52

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} />;
}
أحداثنينثلاثاءأربعاءخميسجمعةسبت

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.