---
id: localization
title: Localization
---

> DayPicker can be easily localized in any languaged supported by date-fns.

## Changing locale

To change the locale, pass to the [locale prop](./api/daypicker#locale) a date-fns [Locale
object](http://date-fns.org/docs/Locale).

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

```jsx preview
import spanish from 'date-fns/locale/es';

function App() {
  return <DayPicker locale={spanish} />;
}
```

## Right-to-left direction

To add right-to-left text direction, set the [dir](./api/daypicker#dir) prop to `rtl`.

```jsx preview
import { DayPicker } from 'react-day-picker';
import arabic from 'date-fns/locale/ar-SA';

function App() {
  return <DayPicker dir="rtl" locale={arabic} />;
}
```

## Numbering system

[Formatter props](./api/daypicker#formatting-props) can be used also change the
numbering system used in the calendar.

For example, to switch to hindu-arabic using
[toLocaleString](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString):

```jsx preview
import React from 'react';
import { format } from 'date-fns';
import { DayPicker } from 'react-day-picker';

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

function App() {
  const nuLocale = 'ar-u-nu-arab';

  const formatDay = (day) => day.getDate().toLocaleString(nuLocale);
  const formatWeekNumber = (weekNumber) => weekNumber.toLocaleString(nuLocale);

  const formatCaption = (date, { locale }) => {
    const y = date.getYear().toLocaleString(nuLocale);
    const m = format(date, 'LLLL', { locale });
    return `${m} ${y}`;
  }


  return (
    <DayPicker
      locale={arabic}
      dir="rtl"
      showWeekNumber
      formatDay={formatDay}
      formatCaption={formatCaption}
      formatWeekNumber={formatWeekNumber}
    />
  );
}
```
