Components / Date Range Picker
Date Range Picker
Dual-input date range picker that opens a range-mode calendar dropdown. Form-associated with FormData support.
formsv0.9.0
Playground
Examples
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
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).
API Reference
| 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 |
Events
| Event | Detail | Description |
|---|---|---|
cg-date-range-change | {from: string, to: string} | Date range selection changed |