Advanced Translations

Most apps don’t need to manually translate DayPicker. Locales from react-day-picker/locale already include translated month names, weekdays, and ARIA labels.

Use this guide only when you need advanced customization, such as custom wording, accessibility copy, or locale-specific formatting tweaks.

Translation props

Prop Name	Type	Description
labels	Labels	Map the ARIA labels used within DayPicker.
formatters	Formatters	Map the functions used as date formatters.
dir	rtl | ltr	Set the text direction.

Override ARIA labels

Use the labels prop to override any DayPicker label. Pass only the labels you want to change.

import { DayPicker, defaultLocale } from "react-day-picker";
import { fr } from "react-day-picker/locale";

export function CustomLabels() {
  return (
    <DayPicker
      locale={fr}
      labels={{
        // Shorten the next/previous button copy
        labelNext: () => "Mois suivant",
        labelPrevious: () => "Mois précédent",
        // Keep the default logic for other labels
        labelDayButton: defaultLocale.labels?.labelDayButton,
      }}
    />
  );
}

Translatable labels

Function	Description
labelDayButton	The ARIA label for the day button.
labelGrid	Return an ARIA label for the month grid, announced when entering the grid.
labelGridcell	The label for the day grid cell when the calendar is not interactive.
labelMonthDropdown	The ARIA label for the months dropdown.
labelNav	The ARIA label for the navigation toolbar.
labelNext	The ARIA label for the next month button.
labelPrevious	The ARIA label for the previous month button.
labelWeekday	The ARIA label for the weekday column header.
labelWeekNumber	The ARIA label for the week number cell (the first cell in the row).
labelWeekNumberHeader	The ARIA label for the week number header element.
labelYearDropdown	The ARIA label for the years dropdown.

Tweak locale data

If you need to adjust date names or formatting, extend defaultLocale (or any DayPicker locale) rather than rebuilding everything.

import { DayPicker, defaultLocale } from "react-day-picker";

const locale = {
  ...defaultLocale,
  localize: {
    ...defaultLocale.localize,
    // Example: shorten weekday names
    day: (n, opts) =>
      defaultLocale.localize.day(n, { ...opts, width: "abbreviated" }),
  },
};

<DayPicker locale={locale} />;

Keep overrides minimal so you inherit built-in behaviors like translated labels and month/year formatting.

Custom formatters

Use the formatters prop to customize how dates, week numbers, and weekday names are rendered.

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.