Skip to main content

Localization

Changing locale

To change the locale, pass to the locale prop a date-fns Locale object.

For example, to localize the calendar in Spanish, import the locale object from date-fns and pass it to the component:

import React from 'react';
import { DayPicker } from 'react-day-picker';

import es from 'date-fns/locale/es';

export default function App() {
  return <DayPicker locale={es} />;
}

Overriding the first day of the week

Use the weekStartsOn prop to change the first day of the week:

import React from 'react';

import es from 'date-fns/locale/es';
import { DayPicker } from 'react-day-picker';

export default function App() {
  return <DayPicker locale={es} weekStartsOn={0} />;
}

Switching to right-to-left direction

To add right-to-left text direction, set the dir prop to rtl.

import React from 'react';
import { DayPicker } from 'react-day-picker';

import arSA from 'date-fns/locale/ar-SA';

export default function App() {
  return <DayPicker dir="rtl" locale={arSA} />;
}

Adopting other numbering systems

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

For example, to switch to hindu-arabic using toLocaleString:

import React from 'react';
import {
  DateFormatter,
  DayPicker,
  WeekNumberFormatter
} from 'react-day-picker';

import { format } from 'date-fns';
import arSA from 'date-fns/locale/ar-SA';

const NU_LOCALE = 'ar-u-nu-arab';

const formatDay: DateFormatter = (day) =>
  day.getDate().toLocaleString(NU_LOCALE);

const formatWeekNumber: WeekNumberFormatter = (weekNumber) => {
  return weekNumber.toLocaleString(NU_LOCALE);
};

const formatCaption: DateFormatter = (date, options) => {
  const y = date.getFullYear().toLocaleString(NU_LOCALE);
  const m = format(date, 'LLLL', { locale: options?.locale });
  return `${m} ${y}`;
};

export default function App() {
  return (
    <DayPicker
      locale={arSA}
      dir="rtl"
      showWeekNumber
      formatters={{ formatDay, formatCaption, formatWeekNumber }}
    />
  );
}

ARIA labels translations

Use the labels prop to translate the labels used for ARIA.