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 and provide suggestions for translating DayPicker into your language. Visit the Translations forum on GitHub.
Translation Props
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
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:
Function | Description |
---|---|
labelDayButton | The ARIA label for the day button. |
labelMonthDropdown | The ARIA label for the months dropdown. |
labelNext | The ARIA label for next month button. |
labelPrevious | The ARIA label for previous month button. |
labelWeekNumber | The ARIA label for the week number cell (the first cell in the row). |
labelYearDropdown | The ARIA label for the years dropdown. |
Optional labels
The following labels are optional and should work out of the box in most languages:
Function | Description |
---|---|
labelDay | The ARIA label for the day button. |
labelGrid | Return an ARIA label for the month grid, that will be announced when entering the grid. |
labelGridcell | The label for the day gridcell when the calendar is not interactive. |
labelNav | The ARIA label for the navigation toolbar. |
labelWeekNumberHeader | The ARIA label for the week number header element. |
labelWeekday | The 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)
}}
/>;
Function | Description |
---|---|
formatCaption | Format the caption of the month. |
formatDay | Format the day date shown in the day cell. |
formatMonthDropdown | Format the month number for the dropdown option label. |
formatWeekNumber | Format the week number. |
formatWeekNumberHeader | Format the week number header. |
formatWeekdayName | Format the weekday name to be displayed in the weekdays header. |
formatYearDropdown | Format 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
}}
/>
);
}