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 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 "date-fns/locale";

function ItalianLabels() {
  return (
    <DayPicker
      locale={it}
      labels={{
        labelDayButton: (date, { today, selected }) => {
          let label = format(date, "PPPP");
          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"
      }}
    />
  );
}

settembre 2024

lun	mar	mer	gio	ven	sab	dom
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6

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 "date-fns/locale";

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

سبتمبر 2024

أحد	اثنين	ثلاثاء	أربعاء	خميس	جمعة	سبت
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5

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

سبتمبر ٢٬٠٢٤

	أحد	اثنين	ثلاثاء	أربعاء	خميس	جمعة	سبت
٣٦	١	٢	٣	٤	٥	٦	٧
٣٧	٨	٩	١٠	١١	١٢	١٣	١٤
٣٨	١٥	١٦	١٧	١٨	١٩	٢٠	٢١
٣٩	٢٢	٢٣	٢٤	٢٥	٢٦	٢٧	٢٨
٤٠	٢٩	٣٠	١	٢	٣	٤	٥