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.

"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>
  )
}

Add this example

This adds the example as components/examples/date-picker/rtl.tsx, together with the Date picker component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/date-picker-rtl.json

To add only the component, follow the Date picker installation.

Props in this example

The Date picker props this example sets, from the API reference.

DatePicker

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

DateRangePicker

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

Every prop is in the Date picker API reference.

More Date picker examples

See them all, with keyboard support and accessibility notes, on the Date picker page.