DatePicker
atomControlled date input that opens a calendar popover. Supports label, helperText, errorText, three sizes, min/max constraints, and border-box sizing matching Input/Select.
Controlled
DatePicker bound to state.
With label & helper text
Label, helperText, and errorText props matching Input's pattern.
With constraints
Min and max restrict selectable range.
Sizes
Three sizes matching Input heights.
Usage
Installation
API Reference
DatePicker props — * required
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | — | Controlled Date object. |
defaultValue | Date | — | Uncontrolled initial Date value. |
onChange | (date: Date) => void | — | Called with the selected Date object. |
placeholder | string | "Select date" | Placeholder text when no date 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. |
min | Date | — | Minimum selectable date. |
max | Date | — | Maximum selectable date. |
style | React.CSSProperties | — | Inline styles for the wrapper. |