Skip to main content
Version: 8.10.1

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
lumamijuvisádo

First Date of the Week​

Use weekStartsOn to override the first date of the week.

<DayPicker weekStartsOn={0} />
dolumamijuvisá

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
35
36
37
38
39
40

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
      }}
    />
  );
}
أحداثنينثلاثاءأربعاءخميسجمعةسبت
٣٦
٣٧
٣٨
٣٩
Ù¤Ù