Date Range Picker
A field that opens a range calendar: pick a start, then an end.Basic
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { DateRangePicker, Field } from '@advui/core'
<Field label="Stay">
<DateRangePicker value={stay} onValueChange={setStay} min={new Date()} />
</Field>API reference
DateRangePicker
Takes the same props as Date Picker, except the value is a range.| Prop | Type | Default | Description |
|---|---|---|---|
value | { start: Date | null; end: Date | null } | — | The picked range. |
defaultValue | { start: Date | null; end: Date | null } | — | Starting `value` when uncontrolled. |
onValueChange | (value: DateRange) => void | — | Called on each press; the panel closes once both ends are picked. |
placeholder | string | 'Pick dates' | Shown while empty. |
title | string | 'Choose dates' | Title of the panel. |
Accessibility
- As Date Picker: a labelled button that opens a titled dialog, described by the picked range.
- Every day in the range has
aria-selected, so screen readers say which days are included.
Platform notes
iOS
Opens as a bottom sheet.
Android
Opens as a bottom sheet; the back button closes it.