Date Picker
Buttons
A fully-featured date picker with calendar view, keyboard navigation, month/year selectors, and optional range selection mode. Includes animated popover and accessible controls.
Loading preview...
Customize
Mode:
Label
Placeholder
Disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | null | undefined | The selected date value. |
onChange | (date: Date | null) => void | undefined | Callback fired when the date is selected. |
placeholder | string | 'Select date' | Placeholder text for the input. |
label | string | undefined | Label text displayed above the input. |
disabled | boolean | false | Disables the date picker. |
disabledDates | (date: Date) => boolean | undefined | Function to determine if a date should be disabled. |
mode | 'single' | 'range' | 'single' | Selection mode: single date or date range. |
className | string | '' | Additional CSS classes. |