Component

Date picker

Single-date picker with calendar panel, month navigation, min/max bounds, and controlled value support.

Date picker is intentionally dependency-free for v1: ISO date strings at the boundary, product-local formatting outside the component when needed.
form
DOM renderImage render
Date pickerDefault
Locks the evaluation start before routing begins.

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 date fields in a run scheduling flow.
Locks the evaluation start before routing begins.
Render state

Open

Calendar popdown with selected day.
April 2026
MonTueWedThuFriSatSun
Open calendar keeps selected, muted, and bounded days visible.
Render state

Bounded

Date picker with unavailable days.
Only this sprint window is available.
Render state

Success

Accepted date with success feedback.
Review window confirmed.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
valueDateValue-Controlled ISO date string.
defaultValueDateValuetodayUncontrolled initial ISO date string.
defaultOpenbooleanfalseInitial calendar popdown state.
minDateValue-Minimum selectable ISO date.
maxDateValue-Maximum selectable ISO date.
onValueChange(value: DateValue) => void-Receives the selected ISO date.
labelReactNode-Field label.