Skip to main content

Translating DayPicker

When localizing DayPicker, you need to translate the labels into your language.

DayPicker supports full customization of ARIA labels and date formatters, which can be translated using the labels prop.

Get help with Translations

Get help and provide suggestions for translating DayPicker into your language. Visit the Translations forum on GitHub.

Translation Props

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

ARIA Labels

The labels prop allows you to customize the ARIA labels.

Example: Italian labels

import { format } from "date-fns";
import { it } from "react-day-picker/locale";

function ItalianLabels() {
return (
<DayPicker
locale={it}
labels={{
labelDayButton: (date, { today, selected }) => {
let label = format(date, "PPPP", { locale: it });
if (today) label = `Oggi, ${label}`;
if (selected) label = `${label}, selezionato`;
return label;
},
labelWeekNumber: (weekNumber) => `Settimana ${weekNumber}`,
labelNext: () => "Prossimo mese",
labelPrevious: () => "Mese precedente",
labelMonthDropdown: () => "Seleziona il mese",
labelYearDropdown: () => "Seleziona l'anno"
}}
/>
);
}

Labels to Translate

The following labels need to be translated, as they default to English:

FunctionDescription
labelDayButtonThe ARIA label for the day button.
labelMonthDropdownThe ARIA label for the months dropdown.
labelNextThe ARIA label for next month button.
labelPreviousThe ARIA label for previous month button.
labelWeekNumberThe ARIA label for the week number cell (the first cell in the row).
labelYearDropdownThe ARIA label for the years dropdown.

Optional labels

The following labels are optional and should work out of the box in most languages:

FunctionDescription
labelDayThe ARIA label for the day button.
labelGridReturn an ARIA label for the month grid, that will be announced when entering the grid.
labelGridcellThe label for the day gridcell when the calendar is not interactive.
labelNavThe ARIA label for the navigation toolbar.
labelWeekNumberHeaderThe ARIA label for the week number header element.
labelWeekdayThe ARIA label for the Weekday column header.

RTL Text Direction

To set the text direction to right-to-left, use the dir prop with the value rtl.

import { arSA } from "react-day-picker/locale";

<DayPicker locale={arSA} dir="rtl" />;

Custom Formatters

Use the formatters prop to customize the formatting of dates, week numbers, day names, and more.

import { format } from "date-fns";

<DayPicker
formatters={{
formatCaption: (date, options) => format(date, "LLLL yyyy", options)
}}
/>;
FunctionDescription
formatCaptionFormat the caption of the month.
formatDayFormat the day date shown in the day cell.
formatMonthDropdownFormat the month number for the dropdown option label.
formatWeekNumberFormat the week number.
formatWeekNumberHeaderFormat the week number header.
formatWeekdayNameFormat the weekday name to be displayed in the weekdays header.
formatYearDropdownFormat the years for the dropdown option label.

Numbering System

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

For example, to switch to Hindu-Arabic numerals, use the native Date.toLocaleString method:

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

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"
formatters={{
formatDay,
formatMonthCaption,
formatWeekNumber
}}
/>
);
}