Date Range Picker

Pro

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.

Preview

Installation

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

Usage

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

Also exported: DateRangeCalendar.

Examples

Flight dates in a sheet

Flight search — departure and return picked in a sheet.

API reference

DateRangeCalendar

Prop Type Default
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".

 "Done"
savedLabel string

What Done becomes once pressed. Default "Saved".

 "Saved"
showFooter boolean

Show the footer even without onConfirm (Clear only acts).

 —
height number

Height of the scrolling months. Default 420.

 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 Default
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".

 "Select dates"
formatSummary (range: Required<DateRange>) => string —
confirmLabel string

Done label. Default "Done".

 "Done"
savedLabel string

What Done becomes while the sheet holds before closing. Default "Saved".

 —
className string —