Single Date Picker

Calendar popover for selecting a single date. Value is an ISO string (YYYY-MM-DD) — not a Date object. Supports min/max date bounds and specific disabled dates. Available in shell (for search bars) and button (standalone) trigger variants.

core/single-date-picker

Installation

1 · Add registry to components.json

2 · Install component

Examples

Default

Shell and button variants with disabled date examples.

Shell variant (for search bars)

Button variant (standalone)

With specific disabled dates

Today+2 and Today+5 are disabled.

API Reference

Prop	Type	Default	Description
`value`req	`string \| undefined`	—	ISO date string YYYY-MM-DD, or undefined when unset.
`onChange`req	`(value: string \| undefined) => void`	—	Called when the date changes.
`label`	`string`	`"Date"`	Label shown above the summary in shell variant.
`placeholder`	`string`	`"Select date"`	Placeholder when no date is selected.
`minDate`	`string`	—	Earliest selectable date (ISO). Defaults to today.
`maxDate`	`string`	—	Latest selectable date (ISO).
`disabledDates`	`string[]`	—	Specific ISO dates to disable.
`variant`	`"shell" \| "button"`	`"shell"`	shell = SearchFieldShell trigger; button = compact bordered button.
`disabled`	`boolean`	—	Disables the picker.
`invalid`	`boolean`	—	Applies destructive styling.
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the popover open state changes.