Date Range Picker

A segmented date-range field with a popover calendar for selecting a start and end date. Use it wherever a user must pick a bounded period — reporting windows, availability, or date filters. Start and end are editable segments with keyboard navigation, and the calendar follows the colour scheme. Anatomy: an inline input group (start segments – end segments + calendar trigger) and a floating popover containing the range Calendar (Header with prev/next navigation, Heading, and one or more month Grids).

A range

value is { start, end } of @internationalized/date values, bindable. The trigger is a field like any other and stands h-9 tall, matching every control in a page-level toolbar row — a mismatched height in a shared row is a bug, not a style choice.

Presets and navigation

presets lists quick ranges in a rail beside the calendar, both visible at once — the same two-pane shape the table's Filters panel uses, because a single swapping pane stops working past a couple of choices. showNavigation adds arrows that shift the whole selected range by its own length, so a reader comparing week to week never has to pick dates again.

Bounded

minValue disables anything earlier, for a report whose data only goes back so far. Better to show the boundary than to accept a range and return nothing.

API

Prop	Type	Default	Description
`value` bindable	`{start: object, end: object}`		The selected range as `{ start, end }` of `@internationalized/date` values. Bindable.
`placeholder` bindable	`object`		Date value that determines which month the calendar opens on when no range is selected. Bindable.
`open` bindable	`boolean`	`false`	Whether the calendar popover is open. Bindable.
`weekdayFormat`	`'narrow'\|'short'\|'long'`	`'short'`	Formatting style for the weekday column headers.
`numberOfMonths`	`number`	`2`	How many month grids to render side by side in the popover.
`showNavigation`	`boolean`	`false`	Shows prev/next buttons that shift the whole selected range by its own length.
`presets`	`Array<{label: string, value: {start: object, end: object}}>`	`[]`	Quick-select ranges listed in a rail beside the calendar.
`class`	`string`		Extra classes merged onto the input group wrapper.
`minValue`	`object`		Earliest selectable date; earlier dates render disabled (forwarded via `...rest`).