DateRangePicker
Date range selection with linked start/end inputs, automatic min/max constraints
import { DateRangePicker } from "@danagraph/design-system"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
startValue | string | — | Start date in YYYY-MM-DD |
endValue | string | — | End date in YYYY-MM-DD |
onChange | (range: { start: string; end: string }) => void | — | Range change handler |
label | string | — | Group label |
error | string | — | Error message |
startValueType
stringDefault —Start date in YYYY-MM-DD
endValueType
stringDefault —End date in YYYY-MM-DD
onChangeType
(range: { start: string; end: string }) => voidDefault —Range change handler
labelType
stringDefault —Group label
errorType
stringDefault —Error message
Accessibility
- Uses role="group" with aria-labelledby for the paired inputs
- Each sub-input has a visually-hidden label for screen readers
- Start/end constraints enforced via min/max attributes
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?