# Date picker: Right to left

> Pass `locale` for the trigger label and a react-day-picker locale with `dir: "rtl"` in `calendarProps` for the calendar. Arrow keys follow the direction.

Example: https://hextaui.com/docs/date-picker/examples/rtl
Component docs: https://hextaui.com/docs/date-picker.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/date-picker-rtl.json
```

This adds `components/examples/date-picker/rtl.tsx` with the Date picker component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/date-picker/rtl.tsx"
"use client"

import { arSA } from "react-day-picker/locale"

import { DatePicker, DateRangePicker } from "@/components/ui/date-picker"

export function DatePickerRtl() {
  return (
    <div dir="rtl" className="flex flex-wrap justify-center gap-2">
      <DatePicker
        locale="ar"
        placeholder="اختر تاريخًا"
        title="اختر تاريخًا"
        clearLabel="مسح"
        clearable
        defaultValue={new Date(2026, 9, 2)}
        calendarProps={{ locale: arSA, dir: "rtl" }}
      />
      <DateRangePicker
        locale="ar"
        placeholder="اختر فترة"
        title="اختر فترة"
        calendarProps={{ locale: arSA, dir: "rtl" }}
      />
    </div>
  )
}
```

## Props in this example

### DatePicker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `Date \| null` | `null` |  |
| `placeholder` | `string` | `"Pick a date"` |  |
| `title` | `string` | `"Select a date"` | Accessible name of the popover, heading of the sheet. |
| `locale` | `string` | `"en-US"` | Formats the trigger label with Intl.DateTimeFormat. Pass a react-day-picker locale in calendarProps to translate the calendar too. |
| `clearable` | `boolean` | `false` | Adds a Clear button below the calendar once there is a value. |
| `clearLabel` | `string` | `"Clear"` |  |
| `calendarProps` | `CalendarProps` | – | Passed to the calendar, except mode, selected, onSelect, required, numberOfMonths and autoFocus. Use it for disabled days, captionLayout, startMonth, endMonth, locale and dir. |

### DateRangePicker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placeholder` | `string` | `"Pick a date range"` |  |
| `title` | `string` | `"Select dates"` |  |
| `locale` | `string` | `"en-US"` | Formats the trigger label with Intl.DateTimeFormat. Pass a react-day-picker locale in calendarProps to translate the calendar too. |
| `calendarProps` | `CalendarProps` | – | Passed to the calendar, except mode, selected, onSelect, required, numberOfMonths and autoFocus. Use it for disabled days, captionLayout, startMonth, endMonth, locale and dir. |

## More Date picker examples

- [Controlled](https://hextaui.com/docs/date-picker/examples/controlled.md)
- [Range](https://hextaui.com/docs/date-picker/examples/range.md)
- [Disabled days](https://hextaui.com/docs/date-picker/examples/disabled-days.md)
- [Month and year dropdowns](https://hextaui.com/docs/date-picker/examples/dropdowns.md)
- [In a form](https://hextaui.com/docs/date-picker/examples/form.md)
- [Disabled](https://hextaui.com/docs/date-picker/examples/disabled.md)
- [Narrow container](https://hextaui.com/docs/date-picker/examples/narrow.md)
- [Inside a sheet](https://hextaui.com/docs/date-picker/examples/in-sheet.md)