Component

Date range picker

Range picker for start/end ISO dates with calendar selection and in-range treatment.

Date range picker returns a small object boundary and keeps range intent visible without introducing a date runtime dependency.
form
DOM renderImage render
Date range pickerDefault
Controls when the evaluation runner can collect samples.

Playground

Controls update query params directly. Complex slots use item-owned examples so component states stay deterministic, linkable, and screenshot-ready.

Loading playground

Rendered matrix

Every state maps to the same component render route through the state query param.

Default

Dense range fields for experiment planning.
Controls when the evaluation runner can collect samples.
Render state

Open

Open calendar with active range.
April 2026
MonTueWedThuFriSatSun
Open calendar shows the selected endpoints and active range wash.
Render state

Partial

Start date selected while waiting for an end date.
April 2026
MonTueWedThuFriSatSun
Partial range keeps the picker open until an end date is chosen.
Render state

Bounded

Range picker constrained to a sprint window.
Only dates inside the current release train are selectable.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
valueDateRangeValue-Controlled start/end ISO date object.
defaultValueDateRangeValue-Uncontrolled initial range value.
defaultOpenbooleanfalseInitial calendar popdown state.
minDateValue-Minimum selectable ISO date.
maxDateValue-Maximum selectable ISO date.
onValueChange(value: DateRangeValue) => void-Receives the selected range.
labelReactNode-Field label.