DateRangePicker

Usage and props

Import this component from @stackunseen/ui/application. Load @stackunseen/ui/styles.css first, then @stackunseen/ui/application.css.

Keep the range, displayed month and popup disclosure in your app. Selection is acknowledged when you update value. Own the range and popup state. A range cannot include disabled dates; validate date rules again on submission.

valueDateRange

Date-only start and end, each nullable while choosing a range.

onValueChange(range: DateRange) => void (optional)

Requests the chosen or cleared range.

openboolean

Whether the calendar popup is visible.

onOpenChange(open: boolean) => void

Accept a requested open or close.

monthDateOnly

Controlled displayed month; onMonthChange requests a change.

onMonthChange(month: DateOnly) => void

Update the displayed month.

localestring

Formatting locale. labels and calendarLabels translate the interface text.

labelstring (optional)

Visible field label. Defaults to the component label.

These are the main props for the example. The package's TypeScript declarations include the full API.

Customize and use with a keyboard