Skip to main content

Date Range Picker

Calendar range selection with start/end ISO dates and in-range day highlighting.

Controlled range

Report period(Optional)

Empty

Custom window(Optional)

Native

Controlled range

Report period(Optional)

Empty

Custom window(Optional)

API

Prop	Required	Type	Default	Description
theme	Optional	SiteTheme	atelier	Visual theme.
variant	Optional	"native" \| "custom"	custom	Custom range calendar (default). Pass variant="native" for two styled `<input type="date">` fields.
value	Optional	{ start: string; end: string }	—	yyyy-MM-dd range.
onChange	Optional	(value) => void	—	Called when both ends are chosen.
min / max	Optional	string	—	Optional day bounds.
clearable	Optional	boolean	true	Show clear action.