Localization

Configure the Locale

Prop Name	Type	Description
locale	Locale	Set the locale. Default is en-US.
weekStartsOn	1 | 2 | 3 | 4 | 5 | 6 | 7	Display the days falling into the other months.
firstWeekContainsDate	1 | 4	Configure the first date in the first week of the year.
ISOWeek	boolean	Use 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

First Date of the Week

Use weekStartsOn to override the first date of the week.

<DayPicker weekStartsOn={0} />

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
/>

ISO Week Dates

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

<DayPicker
  showWeekNumber
  ISOWeek // Switch to ISO week
/>

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 Name	Type	Description
labels	Labels	Map the ARIA labels used within DayPicker.
formatters	Formatters	Map the function used as date formatters.
dir	rtl | ltr	Set 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"
  }}
/>

Member	Type	Description
labelMonthDropdown	() => string	Returns the label for the "Months" dropwdown
labelNext	NavButtonLabel	Label for the "Next month" button.
labelPrevious	NavButtonLabel	Label for the "Previous month" button.
labelWeekNumber	WeekNumberLabel	Label for the "Next month" button.
labelWeekday	WeekdayLabel	Label for the week day used in the head component.
labelYearDropdown	() => string	Label for the "Years" dropdown.

Formatters

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

Member	Type	Description
formatCaption	DateFormatter	Format the month in the caption when captionLayout is buttons.
formatDay	DateFormatter	Format the day in the day cell.
formatMonthCaption	DateFormatter	Format the month in the navigation dropdown.
formatWeekNumber	WeekNumberFormatter	Format the week number.
formatWeekdayName	DateFormatter	Format the week day name in the header
formatYearCaption	DateFormatter	Format 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
      }}
    />
  );
}