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} />;
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

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} />;
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

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} />;
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

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 }}
    />
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

ARIA labels translations

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