Skip to main content

Localization

Configure the Locale

Prop NameTypeDescription
localeLocaleSet the locale. Default is en-US.
weekStartsOn1 | 2 | 3 | 4 | 5 | 6 | 7Display the days falling into the other months.
firstWeekContainsDate1 | 4Configure the first date in the first week of the year.
ISOWeekbooleanUse ISO Week Dates.

Set a Different Locale

To set a locale different than the the default English (US), pass to the locale prop a Locale object imported from date-fns.

For example, to localize the calendar in Spanish, import the es locale object from date-fns and pass it to the component.

import { es } from "date-fns/locale";

<DayPicker locale={es} />; // Set the locale to Spanish
lumamijuvido

First Date of the Week

Use weekStartsOn to override the first date of the week.

<DayPicker weekStartsOn={0} />
dolumamijuvi

First Week of the Year

Use weekStartsOn to override the first date of the first week of the year, used to calculate the week numbers. Possible values are 1 (Monday) or 4 (Thursday).

<DayPicker
showWeekNumber
firstWeekContainsDate={1} // First week must contain Monday
/>
SaSuMoTuWeThFr
W49
W50
W51
W52
W1

ISO Week Dates

Use ISOWeek to switch using ISO Week Dates instead of the locale setting.

<DayPicker
showWeekNumber
ISOWeek // Switch to ISO week
/>
MoTuWeThFrSaSu
27
28
29
30
31

Translate DayPicker

Draft

This paragraph is still a work in progress. If you have any questions, ask to the discussions page on Github.

Use these props to translate DayPicker in any language.

Prop NameTypeDescription
labelsLabelsMap the ARIA labels used within DayPicker.
formattersFormattersMap the function used as date formatters.
dirrtl | ltrSet the text direction.

ARIA Labels

ARIA labels are used by DayPicker to provide a better accessibility experience. Use the labels prop to translate the labels used in the component.

<DayPicker
labels={{
labelNext: () => "Prossimo mese"
labelPrevious: () => "Mese precedente"
}}
/>
MemberTypeDescription
labelMonthDropdown() => stringReturns the label for the "Months" dropwdown
labelNextNavButtonLabelLabel for the "Next month" button.
labelPreviousNavButtonLabelLabel for the "Previous month" button.
labelWeekNumberWeekNumberLabelLabel for the "Next month" button.
labelWeekdayWeekdayLabelLabel for the week day used in the head component.
labelYearDropdown() => stringLabel for the "Years" dropdown.

Formatters

Use the formatters prop to format the dates and the week numbers.

MemberTypeDescription
formatCaptionDateFormatterFormat the month in the caption when captionLayout is buttons.
formatDayDateFormatterFormat the day in the day cell.
formatMonthCaptionDateFormatterFormat the month in the navigation dropdown.
formatWeekNumberWeekNumberFormatterFormat the week number.
formatWeekdayNameDateFormatterFormat the week day name in the header
formatYearCaptionDateFormatterFormat the year in the navigation dropdown.

RTL Text Direction

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

import { arSA } from "date-fns/locale";

<DayPicker locale={arSA} dir="rtl" />;
أحداثنينثلاثاءأربعاءخميسجمعةسبت

Numbering System

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

For example, to switch to hindu-arabic use the native Date.toLocaleString:

import { format } from "date-fns/format";
import { arSA } from "date-fns/locale";
import { DayPicker, Formatters } from "react-day-picker";

const NU_LOCALE = "ar-u-nu-arab";

const formatDay = (day) => day.getDate().toLocaleString(NU_LOCALE);
const formatWeekNumber = (weekNumber) => weekNumber.toLocaleString(NU_LOCALE);
const formatMonthCaption = (date, options) => {
const y = date.getFullYear().toLocaleString(NU_LOCALE);
const m = format(date, "LLLL", options);
return `${m} ${y}`;
};

export function NumberingSystemExample() {
return (
<DayPicker
locale={arSA}
dir="rtl"
showWeekNumber
formatters={{
formatDay,
formatMonthCaption,
formatWeekNumber
}}
/>
);
}
أحداثنينثلاثاءأربعاءخميسجمعةسبت
٢٧
٢٨
٢٩
٣٠
٣١