Date Picker
View on StorybookStorybookSingle date and range selection with calendar integration
Basic Usage
April 11, 2026
Date Range
April 11, 2026 - April 18, 2026
With Constraints
Available from April 11, 2026 to May 11, 2026
Disabled Dates
Weekends are disabled
Real-World Example
Hotel Room Booking
Select check-in and check-out dates
Type Definitions
API Reference - DatePicker
| Name | Type | Default | Description |
|---|---|---|---|
date | Date | — | Controlled selected date |
onDateChange | (date: Date | undefined) => void | — | Callback when date changes |
placeholder | string | — | Placeholder text in English |
placeholderAr | string | — | Placeholder text in Arabic |
disabled | boolean | false | Disable the picker |
formatDate | (date: Date | undefined, locale: "en" | "ar") => string | — | Custom date formatter |
minDate | Date | — | Minimum selectable date |
maxDate | Date | — | Maximum selectable date |
disabledDates | Date[] | [] | Array of dates to disable |
showHijri | boolean | false | Show Hijri date alongside Gregorian |
API Reference - DateRangePicker
| Name | Type | Default | Description |
|---|---|---|---|
dateRange | DateRange | — | Controlled date range ({ from: Date, to: Date }) |
onDateRangeChange | (range: DateRange | undefined) => void | — | Callback when range changes |
placeholder | string | — | Placeholder text in English |
placeholderAr | string | — | Placeholder text in Arabic |
disabled | boolean | false | Disable the picker |
formatDateRange | (range: DateRange | undefined, locale: "en" | "ar") => string | — | Custom range formatter |
minDate | Date | — | Minimum selectable date |
maxDate | Date | — | Maximum selectable date |
disabledDates | Date[] | [] | Array of dates to disable |
Features
- Single date and range selection
- Calendar integration with popover
- Min/max date constraints
- Custom disabled dates
- Customizable formatting
- Hijri calendar support (coming soon)
- Bilingual support
- RTL/LTR support
- Full accessibility
- Quick date selection
Best Practices
Do
- ✓ Show a clear date format placeholder (e.g., DD/MM/YYYY)
- ✓ Support both calendar and manual text input
- ✓ Respect locale for date formatting and first day of week
- ✓ Disable invalid dates (past dates for future events, etc.)
Don't
- ✗ Don't default to today if the context doesn't warrant it
- ✗ Don't use for selecting a time — combine with TimePicker
- ✗ Don't show too many months at once on mobile