Components / Date Range Picker

Date Range Picker

Dual-input date range picker that opens a range-mode calendar dropdown. Form-associated with FormData support.

forms v0.9.0

Playground

Default

<cg-date-range-picker label="Travel dates" from="2026-04-01" to="2026-04-10" style="max-width:400px;"></cg-date-range-picker>

Disabled

<cg-date-range-picker label="Dates" disabled style="max-width:400px;"></cg-date-range-picker>

import { CgDateRangePicker } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-date-range-picker';

Per-component imports ship only that component (~8 kB gzip).

Prop	Type	Default	Description
`label`	string	""	Label text
`from`	string	""	Start date (ISO)
`to`	string	""	End date (ISO)
`min`	string	""	Minimum date (ISO)
`max`	string	""	Maximum date (ISO)
`placeholder`	string	"Select date range"	Placeholder text
`format`	string	"MMM dd, yyyy"	Date display format
`disabled`	boolean	false	Disabled state
`open`	boolean	false	Dropdown open state

Event	Detail	Description
`cg-date-range-change`	{from: string, to: string}	Date range selection changed