Dual Calendar Range Picker
A date range field with a two-month popover that switches between the Gregorian and the Hijri (Umm al-Qura) calendar, with each Hijri day's Gregorian date under it.
Preview
Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.
PreviewCode
EnglishMirroredArabic
LTR →
Installation
Add the component
npx ritla add dual-date-range-pickerAlso works with shadcn:
npx shadcn@latest add @ritla/dual-date-range-pickerOr copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.
Usage
import { DualDateRangePicker } from "@/components/ui/dual-date-range-picker";<DualDateRangePicker label="Travel dates" onValueChange={(range, calendar) => …} />Examples
API reference
DualDateRangePicker
| Prop | Type | Default | Description |
|---|---|---|---|
value / defaultValue | DateRange | None | The range as JavaScript dates, whatever the calendar. |
onValueChange | (range, calendar) => void | None | With the calendar it was picked in. |
calendar / defaultCalendar | "gregorian" | "hijri" | "gregorian" | Figma's Calendar. |
label / required / helperText / error / disabled / placeholder | … | None | As on the Input field. |
DualDateRangeMenu
| Prop | Type | Default | Description |
|---|---|---|---|
value / calendar / onApply / onCancel / numberOfMonths | … | None | The popover on its own, to place elsewhere. |
Accessibility
Keyboard
Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.
| Key | Action |
|---|---|
| EnterSpace | Opens the popover. |
| ArrowRightArrowLeftArrowUpArrowDown | Between days; in Arabic, ArrowLeft is the next day. |
| Escape | Closes without changing anything. |
ARIA
- The calendar switch is a named radio group, and the number of days is announced politely.
- The small Gregorian date is visual; the spoken day name says it.
Arabic and RTL notes
Mirrors
- Months read from the right, the week starts on Saturday and the arrows mirror.
- The switch starts the header on the right; Apply ends the footer on the left.
Does not mirror
- Day numbers stay as they are inside their cells.
- Numerals
- Western digits by default;
numeralson RitlaProvider changes them. - Arabic typography
numeric-14for the days,numeric-12for the small Gregorian date.- Mixed-direction text
- The range in words says إلى, never a dash: a dash between numbers reorders in Arabic.