# Date Range Picker

Booking-style range calendar, inline or in a sheet. Tap check-in and check-out or hold and drag across your stay, adjust either end, and watch the night count update; sold-out days stay out of reach.

> Composed · Pro · Data Display — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/date-range-picker
```

## Import

```tsx
import { DateRangeCalendar, DateRangePicker } from "@/components/ui/date-range-picker/date-range-picker";
```

## Variants

- `sheet` — Flight dates in a sheet: `npx @lumioui/cli add pro/date-range-picker-sheet`

## Props

### DateRangeCalendar

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `DateRange` | — |
| `defaultValue?` | `DateRange` | — |
| `onChange?` | `(range: DateRange) => void` | Fires on every committed change — each pick, each day painted. |
| `onConfirm?` | `(range: Required<DateRange>) => void` | Shows the Clear / Done footer; Done fires this with the full range. |
| `confirmLabel?` | `string` | Done label. Default "Done". |
| `savedLabel?` | `string` | What Done becomes once pressed. Default "Saved". |
| `showFooter?` | `boolean` | Show the footer even without `onConfirm` (Clear only acts). |
| `height?` | `number` | Height of the scrolling months. Default 420. |
| `title?` | `string` | Optional title above the header. |
| `formatSummary?` | `(range: Required<DateRange>) => string` | Line under the title for a complete range. |
| `className?` | `string` | — |

### DateRangePicker

| Prop | Type | Notes |
| --- | --- | --- |
| `open` | `boolean` | — |
| `onOpenChange` | `(open: boolean) => void` | — |
| `value?` | `DateRange` | — |
| `onChange?` | `(range: DateRange) => void` | Fires once, on Done, with the saved range. |
| `onDraftChange?` | `(range: DateRange) => void` | Fires on every pick inside the sheet — for figures that count live. |
| `title?` | `string` | Sheet title. Default "Select dates". |
| `formatSummary?` | `(range: Required<DateRange>) => string` | — |
| `confirmLabel?` | `string` | Done label. Default "Done". |
| `savedLabel?` | `string` | What Done becomes while the sheet holds before closing. Default "Saved". |
| `className?` | `string` | — |

## Icons rendered

- `check` — /icons.html?i=check

Source: https://lumioui.com/components/date-range-picker