Date range

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

A start and end date is DateRangeInput from @prepared911/ui/date-range-input. There is no before/after/between mode enum. The calendar grid is Calendar; this field owns the popover.

Props

Prop	Meaning
`label`	Required name of the group.
`rangeLabels`	Start and end, heard before the label.
`segmentLabels`	Day, month, and year for both ends.
`calendarLabel`	The button that opens the calendar.
`value` / `defaultValue`	`{ start, end }` of local `Date`s, or `null`.
`onValueChange`	Next value and `details.reason`.
`allowPartialRange`	Reports a range with `null` for an empty end.
`minDate` / `maxDate` / `disableFuture`	Bounds for both ends.
`confirm`	Requires `applyLabel` and `resetLabel`.

Import

Example

Advanced Date Range Picker / Usage

Advanced Date Range Picker / Accessibility

On this page

Props

Import

Example

Date range

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

A start and end date is DateRangeInput from @prepared911/ui/date-range-input. There is no before/after/between mode enum. The calendar grid is Calendar; this field owns the popover.

Props

Prop	Meaning
`label`	Required name of the group.
`rangeLabels`	Start and end, heard before the label.
`segmentLabels`	Day, month, and year for both ends.
`calendarLabel`	The button that opens the calendar.
`value` / `defaultValue`	`{ start, end }` of local `Date`s, or `null`.
`onValueChange`	Next value and `details.reason`.
`allowPartialRange`	Reports a range with `null` for an empty end.
`minDate` / `maxDate` / `disableFuture`	Bounds for both ends.
`confirm`	Requires `applyLabel` and `resetLabel`.

Import

Example

Advanced Date Range Picker / Usage

Advanced Date Range Picker / Accessibility

On this page

Props

Import

Example