Design an Intuitive Date Picker Component for Web and Mobile
Design a complete date picker component specification covering input, calendar panel, range selection, validation, and accessibility.
📝 The Prompt
Design a versatile date picker component for a [APPLICATION_CONTEXT] (e.g., travel booking, project management, healthcare scheduling) that supports [DATE_SELECTION_MODE] (single date, date range, or multi-date selection). The component should work seamlessly on both desktop and mobile.
**Design Specification:**
1. **Input Field Design**:
- Define the trigger input field format: placeholder text, date format display ([DATE_FORMAT], e.g., MM/DD/YYYY, DD MMM YYYY), and calendar icon placement (left vs. right)
- Specify behavior for manual keyboard entry with auto-formatting and validation
- Show clear/reset button visibility rules
2. **Calendar Panel Layout**:
- Month/year header with navigation arrows and direct month/year jump (dropdown or scroll)
- Day grid: 7-column layout with weekday labels ([FIRST_DAY_OF_WEEK]: Sunday or Monday)
- Visual treatment for: today, selected date(s), date range span, hovered date, disabled/unavailable dates, dates outside current month
- Provide exact color values, font sizes, and cell dimensions (min 44x44px touch target)
3. **Date Range Mode Specifics** (if applicable):
- Start/end date selection flow with visual span highlighting
- Dual-month panel option for desktop
- How the range preview updates on hover before confirming end date
4. **Constraints & Validation**:
- Min/max date boundaries with visual disabled styling
- Blocked dates (e.g., holidays, unavailable slots) pattern
- Error messaging for invalid selections
5. **Responsive Adaptation**:
- Desktop: dropdown panel anchored to input, keyboard navigation (arrow keys, Enter, Escape)
- Mobile: full-screen or bottom-sheet modal with large touch targets and swipe gestures for month navigation
6. **Accessibility**: ARIA roles (grid, gridcell), live region announcements for month changes, focus management, and screen reader date format.
Deliver as a component specification with state diagrams and interaction flows.
💡 Tips for Better Results
Ensure every calendar cell meets the 44x44px minimum touch target — this is the single most common date picker usability failure. Always support keyboard-only navigation with visible focus indicators; date pickers are notoriously inaccessible without deliberate ARIA implementation. Show two months side-by-side on desktop for range selection to dramatically reduce clicks.
🎯 Use Cases
Product designers and component library maintainers use this when building or standardizing date selection experiences across booking systems, form-heavy applications, or enterprise design systems.