Date Range Picker

A composite date picker with presets, calendar, and support for single or range date selection.

Usage

Use mode="single" for picking a single date instead of a range.

Prop	Type	Default	Description
`mode`	`'range' \| 'single'`	`'range'`	Whether to select a date range or a single date.
`modelValue`	`{ start: DateValue; end: DateValue } \| DateValue`	-	The selected date value (range object or single date).
`presets`	`{ label: string; value: { start: DateValue; end: DateValue } \| DateValue }[]`	-	Predefined date options shown as quick-select buttons.
`showCalendar`	`boolean`	`true`	Whether to display the calendar alongside presets.
`closeOnPresetSelect`	`boolean`	`true`	Close the popover automatically when a preset is selected.
`placeholder`	`string`	-	Placeholder text shown when no date is selected.
`locale`	`string`	`'en-US'`	Locale string for date formatting.
`minValue`	`DateValue`	-	The earliest selectable date.
`maxValue`	`DateValue`	-	The latest selectable date.
`disabled`	`boolean`	`false`	Disables the entire picker.
`numberOfMonths`	`number`	`2`	Number of months visible in the calendar at once.

Root component managing state and popover

The button that opens the picker popover

Popover content wrapper for calendar and presets

The calendar grid for selecting dates

Quick-select preset buttons