DatePicker
A comprehensive date and range selection component with multiple view modes.
Installation
npx vayu-ui init #one time onlynpx vayu-ui add date-pickernpx vayu-ui add -t date-picker #with test case needsUsage
DatePicker Component
WCAG 2.2 AA Compliant • Keyboard Navigation • Range Selection • Disabled Dates
Single Date Selection
Select a single date from the calendar
Selected: none
Date Range Selection
Select a start and end date
Range: none
Disabled Weekdays
Disable weekends (Saturdays & Sundays)
Selected: none
Note: Weekends are shown with strikethrough and cannot be selected
Disabled Specific Dates
Block specific dates (holidays, blocked days)
Selected: none
Blocked dates: 15th, 20th of this month, and 1st of next month
Keyboard Navigation
Full keyboard support for accessibility
Navigation
- ← Previous day
- → Next day
- ↑ Previous week
- ↓ Next week
Actions
- Enter Select date
- Escape Close calendar
- Home First day of month
- End Last day of month
- PgUp/PgDn Prev/Next month
Range with Disabled Weekends
Range selection that skips weekends
Range selection with weekends disabled - useful for booking business days
Disabled State
The entire date picker can be disabled
<DatePicker mode="single">
<DatePicker.Trigger placeholder="Select date" />
<DatePicker.Calendar>
<DatePicker.Calendar.Footer />
</DatePicker.Calendar>
</DatePicker>
<DatePicker mode="range">
<DatePicker.Trigger placeholder="Select date range" />
<DatePicker.Calendar>
<DatePicker.Calendar.Footer />
</DatePicker.Calendar>
</DatePicker>Anatomy
<DatePicker>
<DatePicker.Trigger />
<DatePicker.Calendar>
<DatePicker.Calendar.Footer />
</DatePicker.Calendar>
</DatePicker>Accessibility
- Keyboard support: Arrow keys navigate between dates, months, and years. Space and Enter select the focused date. Escape closes the calendar.
- ARIA attributes: Proper focus management,
aria-expandedon the trigger, and standard calendar grid aria features are supported. - Focus behavior: Focus is trapped within the calendar popup when opened and returns to the trigger when closed.
Screen reader behavior
Screen readers announce the trigger state (expanded or collapsed) and the currently selected date. Once the calendar is open, the visible month and year are announced, and moving focus through dates accurately speaks each date, its selection status, and any disabled status.
Component Folder Structure
DatePicker/
├── DatePicker.tsx
├── DatePickerCalendar.tsx
├── DatePickerDropDowns.tsx
├── DatePickerFooter.tsx
├── DatePickerIcons.tsx
├── DatePickerTrigger.tsx
├── index.ts
├── types.ts
└── utils.tsProps
DatePicker
| Prop | Type | Description |
|---|---|---|
mode | 'single' | 'range' | Controls the selection mode (defaults to 'single'). |
value | Date | DateRange | null | The controlled value of the date picker. |
defaultValue | Date | DateRange | null | The initial value when uncontrolled. |
onChange | (value: DatePickerValue) => void | Callback triggered when the date or range changes. |
disabled | boolean | If true, disables the functionality. |
disabledWeekdays | number[] | Array of days to disable (0 for Sunday to 6 for Saturday). |
disabledDates | Date[] | Specific dates that are disabled from selection. |
placeholder | string | Fallback text used internally. |
DatePicker.Trigger
| Prop | Type | Description |
|---|---|---|
placeholder | string | Displayed text when no date is selected. |
DatePicker.Calendar
| Prop | Type | Description |
|---|---|---|
| inherits | HTMLAttributes<HTMLDivElement> | Standard HTML attributes for styling and events. |
DatePicker.Calendar.Footer
| Prop | Type | Description |
|---|---|---|
| inherits | HTMLAttributes<HTMLDivElement> | Standard HTML attributes for styling and events. |