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

First week of the year

To override the date in the first week of the year, use firstWeekContainsDate. Use this prop to change the week number calculation according to date-fns getWeek function.

|

import React from 'react';

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

export default function App() {
  return (
    <DayPicker
      showWeekNumber
      weekStartsOn={2} // Tuesday as first day of the week
      firstWeekContainsDate={4} // Number the first week of the year from day 4
      formatters={{
        // Add `W` prefix to week number
        formatWeekNumber: (weekNumber) => `W${weekNumber}`
      }}
    />
  );
}

Switching to ISO week dates

By default, week numbers and week days follow the DayPicker's locale. Use the ISOWeek prop to switch to ISO week dates.

|

import React from 'react';

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

export default function App() {
  return <DayPicker ISOWeek showWeekNumber showOutsideDays />;
}

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

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.