Date Picker
Demo
Props
| Prop | Type | Description |
|---|---|---|
triggerVariant | 'default' | 'secondary' | 'outline' | 'destructive' | 'ghost' | 'link' (optional) | The variant style of the trigger button. |
placeholder | string (optional) | Placeholder text for the button when no date is selected. |
mode | 'single' | 'range' (optional) | The selection mode of the DatePicker, either 'single' or 'range'. |
defaultValue | Date (optional) | The default selected date for single mode. |
onSelect | (value: Date) => void (optional) | Callback function when a date is selected in single mode. |
defaultRange | DateRange (optional) | The default selected date range for range mode. |
onRangeSelect | (value: DateRange) => void (optional) | Callback function when a date range is selected in range mode. |
rangeOfMonths | number (optional) | Number of months to display in range mode. |
classNames | { trigger?: string; content?: string } (optional) | Custom class names for the trigger button and calendar content. |
Styles
This component allows for custom styles via the classNames prop:
trigger: CSS class for styling the trigger button.content: CSS class for styling the calendar content.
Functionality
- The DatePicker supports both single date and range selections.
- Features a calendar pop-up for easy date picking.
- Can be initialized with default values for single date or date range.