DatePicker Component
A flexible date picker component with various configuration options.
Basic Usage
The standard DatePicker with default configuration.
Date Constraints
Restrict selectable dates with min/max dates and disabled dates.
Min and Max Dates
Only dates between 7/11/2025 and 8/12/2025 are selectable
Disabled Specific Dates
Some specific dates are disabled
Disabled Days of Week
Weekends (Saturday and Sunday) are disabled
Combined Constraints
All constraints applied together
Formatting and Display
Customize the appearance and behavior of the DatePicker.
Custom Date Format
Displays date in MM/DD/YYYY format
With Week Numbers
Shows ISO week numbers in the calendar
Non-Clearable
Cannot clear the selected date
Different Sizes
Date Range Example
Using two DatePickers to create a date range selector.
Start Date
End Date
API Reference
Complete documentation of the DatePicker component props.
DatePicker Props
| Prop | Description | Type | Default |
|---|---|---|---|
| value | Currently selected date (controlled) | Date | undefined | - |
| defaultValue | Default selected date (uncontrolled) | Date | undefined | - |
| onChange | Callback when date selection changes | (date: Date | undefined) => void | - |
| placeholder | Text to display when no date is selected | string | "Select date" |
| format | Format for displaying the selected date | string | "yyyy-MM-dd" |
| minDate | Minimum selectable date | Date | - |
| maxDate | Maximum selectable date | Date | - |
| disabledDates | Array of specific dates to disable | Date[] | - |
| disabledDaysOfWeek | Array of days of week to disable (0-6) | number[] | - |
| showWeekNumbers | Whether to show week numbers | boolean | false |
| clearable | Whether to show a clear button | boolean | true |
| size | Size of the date picker component | "sm" | "md" | "lg" | "md" |