Date Picker
ProA date selection component combining a text input with a calendar popup. Supports manual date entry, min/max date constraints, and disabled date ranges. The calendar grid follows the WAI-ARIA date picker pattern.
10 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Single | ||
| Range | Dual inputs for selecting a start and end date with a connected calendar. | Use for date ranges — booking windows, report periods, leave requests. |
| With Presets | Date picker with quick-select buttons for common ranges. | Use for analytics dashboards where "Last 7 days", "This month" are common selections. |
Usage Guidelines
Do
Allow manual text entry alongside the calendar picker.
Don't
Force users to use only the calendar popup — some users prefer typing.
Do
Show the expected date format as placeholder text (e.g., "DD/MM/YYYY").
Don't
Use a date picker for selecting a year or month alone — use a simple Select.
Do
Disable dates outside the valid range rather than showing errors after selection.
Don't
Open the calendar automatically on page load.
Do
Use aria-label on the calendar trigger button.
Don't
Code
Design Tokens
Accessibility
- Calendar grid uses role="grid" with role="gridcell" for each date.
- Current date is indicated with aria-current="date".
- Selected date uses aria-selected="true".
- Calendar trigger button has aria-label="Open calendar" and aria-haspopup="dialog".
- Disabled dates use aria-disabled="true" and are skipped in keyboard navigation.