# Calendar & DatePicker

Themed `<Calendar>` (react-day-picker) plus the canonical `<DatePicker>` recipe (Calendar inside a Popover). Single date and range modes share the same trigger.

[View examples](https://marsam.rahhal.app/components/date-picker) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/calendar · @rahhal/ui/date-picker`

**Category:** `forms`

## Components

| component | purpose |
| --- | --- |
| Calendar | themed react-day-picker grid; render inline or inside any Popover |
| DatePicker | Calendar in a Popover triggered by a button — the recipe most apps actually want |

## DatePicker modes

| mode | value type | use when |
| --- | --- | --- |
| single (default) | Date | pick one date (birthday, deadline) |
| range | { from, to } | pick a window (trip dates, hotel stay) |

## Props (DatePicker)

| prop | type | purpose |
| --- | --- | --- |
| mode | \"single\" | \"range\" | default `single` |
| value | Date | DateRange | controlled value |
| onChange | (next) => void | fires on selection |
| disabled | Matcher | Matcher[] | disable individual days (e.g. weekends) |
| locale | string | BCP-47 locale for the formatted button label |
| buttonVariant / buttonSize | Button props | trigger styling |

## RTL

react-day-picker mirrors the day grid automatically when `<html dir="rtl">` is set. The chevrons in the calendar nav and the trigger button rotate via `rtl:rotate-180` so they always point in the reading direction.