DateRangePicker
atomSelects a start and end date from a calendar popover. Supports label, helperText, errorText, three sizes, and real-time range highlighting on hover. Returns a DateRange object with start/end Date values. Border-box sizing matches Input/Select.
Controlled
DateRangePicker bound to state.
With label & helper text
Label, helperText, and errorText props matching Input's pattern.
Disabled
Non-interactive state.
Sizes
Three sizes matching Input heights.
Custom trigger
Replace the default input with a compact Button trigger — ideal for filter bars and toolbars.
Usage
Installation
API Reference
DateRangePicker props — * required
| Prop | Type | Default | Description |
|---|---|---|---|
value | DateRange | — | Controlled range with { start: Date; end: Date }. |
defaultValue | DateRange | — | Uncontrolled initial range. |
onChange | (range: DateRange) => void | — | Called with the selected range. |
placeholder | string | "Select range" | Placeholder when no range is selected. |
label | string | — | Label displayed above the picker. |
helperText | string | — | Hint or description below the picker. |
errorText | string | — | Error message — triggers the error visual state with aria-invalid. |
size | "sm" | "md" | "lg" | "md" | Height and font size — matches Input sizing. |
disabled | boolean | false | Disables the input. |
trigger | React.ReactNode | — | Custom trigger element replacing the default input-style button. Use with a Button for compact toolbar layouts. |
min | Date | — | Minimum selectable date. |
max | Date | — | Maximum selectable date. |
style | React.CSSProperties | — | Inline styles for the wrapper. |