DatePicker Component
Date selection with a calendar in a popover. Pick a single date or a date range with full keyboard navigation.
Default
A basic date picker with calendar icon.
Selected: None
With Dropdown Icon
Date picker with chevron-down icon on the right, no calendar icon on the left.
Selected: None
Date Range Picker
Select a date range with start and end dates displayed side-by-side.
From: None
To: None
With Date Constraints
Limit selection to a specific date range.
Selected: None
Disable Weekends
Disable specific dates with a custom function.
Selected: None
Custom Format
Display date with a custom format string.
Selected: None
Dropdown Mode
Use dropdown selects for quick month and year navigation.
Selected: None
In a Form
DatePicker integrated with form fields.
Selected: None
Travel Dates
Date range picker with custom labels for travel booking.
Check-in: None
Check-out: None
Date and Time Picker
Combine date and time selection in a single input scenario.
No appointment scheduled
Disabled State
A disabled date picker.