Date Picker
A date picker component with calendar view for selecting dates.
Basic Date Picker
A simple date picker with placeholder text
With Label
Date picker with a label
Preselected Date
Date picker with a default selected date
Disabled State
Date picker in disabled state
API Reference
Props and usage details
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | null | null | The selected date value |
| onChange | (date: Date | null) => void | - | Callback when date is selected |
| label | string | - | Label text displayed above the picker |
| placeholder | string | "Select date" | Placeholder text when no date is selected |
| disabled | boolean | false | Whether the date picker is disabled |
| className | string | - | Additional CSS classes |
Features
- ✓Calendar view with month/year navigation
- ✓Today indicator and quick select button
- ✓Click outside to close
- ✓Visual highlight for selected date
- ✓Full design system token support
- ✓Dark mode support