---
sidebar_position: 5
---

# Localization

## Configure the Locale

| Prop Name               | Type                                          | Description                                                        |
| ----------------------- | --------------------------------------------- | ------------------------------------------------------------------ |
| `locale`                | [`Locale`](https://date-fns.org/docs/I18n)    | Set the locale. Default is `en-US`.                                |
| `weekStartsOn`          | `1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `7` | Display the days falling into the other months.                    |
| `firstWeekContainsDate` | `1` \| `4`                                    | Configure the first date in the first week of the year.            |
| `ISOWeek`               | `boolean`                                     | Use [ISO Week Dates](https://en.wikipedia.org/wiki/ISO_week_date). |

### Set a Different Locale

To set a locale different than the the default `English (US)`, pass to the `locale` prop a [Locale](https://date-fns.org/docs/I18n) object imported from `date-fns`.

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

```tsx caption="render:Spanish"
import { es } from "date-fns/locale";

<DayPicker locale={es} />; // Set the locale to Spanish
```

<BrowserWindow>
  <ExamplesV8.Spanish />
</BrowserWindow>

### First Date of the Week

Use `weekStartsOn` to override the first date of the week.

```tsx
<DayPicker weekStartsOn={0} />
```

<BrowserWindow>
  <ExamplesV8.SpanishWeekStartsOn />
</BrowserWindow>

### First Week of the Year

Use `weekStartsOn` to override the first date of the first week of the year, used to calculate the week numbers. Possible values are `1` (Monday) or `4` (Thursday).

```tsx caption="render:WeeknumberCustom"
<DayPicker
  showWeekNumber
  firstWeekContainsDate={1} // First week must contain Monday
/>
```

<BrowserWindow>
  <ExamplesV8.WeeknumberCustom />
</BrowserWindow>

### ISO Week Dates

Use `ISOWeek` to switch using [ISO Week Dates](https://en.wikipedia.org/wiki/ISO_week_date) instead of the locale setting.

```tsx caption="render:WeeknumberIso"
<DayPicker
  showWeekNumber
  ISOWeek // Switch to ISO week
/>
```

<BrowserWindow>
  <ExamplesV8.WeeknumberIso />
</BrowserWindow>

## Translate DayPicker

:::info Draft

This paragraph is still a work in progress. If you have any questions, ask to the [discussions](https://github.com/gpbl/react-day-picker/discussions) page on Github.

:::

Use these props to translate DayPicker in any language.

| Prop Name    | Type                                              | Description                                |
| ------------ | ------------------------------------------------- | ------------------------------------------ |
| `labels`     | [`Labels`](../api/type-aliases/Labels.md)         | Map the ARIA labels used within DayPicker. |
| `formatters` | [`Formatters`](../api/type-aliases/Formatters.md) | Map the function used as date formatters.  |
| `dir`        | `rtl` \| `ltr`                                    | Set the text direction.                    |

### ARIA Labels

ARIA labels are used by DayPicker to provide a better accessibility experience. Use the `labels` prop to translate the labels used in the component.

```tsx
<DayPicker
  labels={{
    labelNext: () => "Prossimo mese"
    labelPrevious: () => "Mese precedente"
  }}
/>
```

| Member               | Type                                                        | Description                                        |
| :------------------- | :---------------------------------------------------------- | :------------------------------------------------- |
| `labelMonthDropdown` | () => `string`                                              | Returns the label for the "Months" dropwdown       |
| `labelNext`          | [`NavButtonLabel`](../api/type-aliases/NavButtonLabel.md)   | Label for the "Next month" button.                 |
| `labelPrevious`      | [`NavButtonLabel`](../api/type-aliases/NavButtonLabel.md)   | Label for the "Previous month" button.             |
| `labelWeekNumber`    | [`WeekNumberLabel`](../api/type-aliases/WeekNumberLabel.md) | Label for the "Next month" button.                 |
| `labelWeekday`       | [`WeekdayLabel`](../api/type-aliases/WeekdayLabel.md)       | Label for the week day used in the head component. |
| `labelYearDropdown`  | () => `string`                                              | Label for the "Years" dropdown.                    |

### Formatters

Use the `formatters` prop to format the dates and the week numbers.

| Member               | Type                                                                | Description                                                        |
| :------------------- | :------------------------------------------------------------------ | :----------------------------------------------------------------- |
| `formatCaption`      | [`DateFormatter`](../api/type-aliases/DateFormatter.md)             | Format the month in the caption when `captionLayout` is `buttons`. |
| `formatDay`          | [`DateFormatter`](../api/type-aliases/DateFormatter.md)             | Format the day in the day cell.                                    |
| `formatMonthCaption` | [`DateFormatter`](../api/type-aliases/DateFormatter.md)             | Format the month in the navigation dropdown.                       |
| `formatWeekNumber`   | [`WeekNumberFormatter`](../api/type-aliases/WeekNumberFormatter.md) | Format the week number.                                            |
| `formatWeekdayName`  | [`DateFormatter`](../api/type-aliases/DateFormatter.md)             | Format the week day name in the header                             |
| `formatYearCaption`  | [`DateFormatter`](../api/type-aliases/DateFormatter.md)             | Format the year in the navigation dropdown.                        |

### RTL Text Direction

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

```tsx caption="render:Rtl"
import { arSA } from "date-fns/locale";

<DayPicker locale={arSA} dir="rtl" />;
```

<BrowserWindow>
  <ExamplesV8.Rtl />
</BrowserWindow>

### Numbering System

Use the proper `formatters` to change the [numbering system](https://en.wikipedia.org/wiki/Numeral_system) used in the calendar.

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

```tsx caption="render:NumberingSystem"
import { format } from "date-fns/format";
import { arSA } from "date-fns/locale";
import { DayPicker, Formatters } from "react-day-picker";

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

const formatDay = (day) => day.getDate().toLocaleString(NU_LOCALE);
const formatWeekNumber = (weekNumber) => weekNumber.toLocaleString(NU_LOCALE);
const formatMonthCaption = (date, options) => {
  const y = date.getFullYear().toLocaleString(NU_LOCALE);
  const m = format(date, "LLLL", options);
  return `${m} ${y}`;
};

export function NumberingSystemExample() {
  return (
    <DayPicker
      locale={arSA}
      dir="rtl"
      showWeekNumber
      formatters={{
        formatDay,
        formatMonthCaption,
        formatWeekNumber
      }}
    />
  );
}
```

<BrowserWindow>
  <ExamplesV8.NumberingSystem />
</BrowserWindow>