Date/Time Picker Component

Design a date/time picker component that allows users to select dates and times with calendar navigation.

R - Requirements

Key Questions:

• Single date or range? (single, range, both)
• Time selection? (date only, time only, both)
• Date format? (MM/DD/YYYY, DD/MM/YYYY, ISO)
• Min/max dates? (restrict selectable dates)
• Locale support? (different date formats per locale)

Common Answers:

• Support both single and range
• Date + time selection
• ISO format (YYYY-MM-DD)
• Min/max date constraints
• Locale-aware formatting

A - Architecture

Date Selection Flow:

Calendar Architecture:

Architecture Decisions:

• Calendar algorithm (calculate days in month, leap years) - Handle edge cases correctly
• Date parsing/formatting (handle multiple formats) - Support locale-specific formats
• Timezone handling (UTC vs local time) - Store in UTC, display in local
• Accessibility (keyboard navigation, screen readers) - ARIA date picker pattern

Relevant Content:

• Accessible Forms - Form patterns
• Keyboard Shortcuts - Calendar navigation

D - Data Model

State Management:

• Selected date(s) (single or range)
• Current view (month, year, decade)
• Calendar state (visible month/year)
• Time state (hours, minutes, seconds)
• Input value (formatted string)

Date Handling:

• Date object (native Date or library like date-fns/dayjs)
• Timezone (store in UTC, display in local)
• Validation (valid date, within min/max)

Relevant Content:

• State Machines - Date selection flow

I - Interface

Features:

• Input field (with calendar icon)
• Calendar popup (month view, year view, decade view)
• Date cells (selectable, disabled, today, selected)
• Navigation arrows (prev/next month)
• Month/year selector
• Time picker (hours, minutes, AM/PM)
• Range selection (start date, end date)

Accessibility:

• ARIA date picker pattern
• role="combobox" on input
• role="grid" for calendar
• role="gridcell" for date cells
• Keyboard navigation (arrows, Home, End, Page Up/Down)
• Screen reader announcements

Relevant Content:

• Keyboard Shortcuts - Calendar navigation
• ARIA Live Regions - Date announcements

O - Optimizations

Performance:

• Lazy render calendar (only render visible month)
• Memoize date calculations (days in month, leap years)
• Virtual scrolling (for year/decade views if many years)

UX:

• Smooth animations (month transitions)
• Quick selection (click month/year to jump)
• Keyboard shortcuts (arrow keys, Enter to select)

Relevant Content:

• Animation Performance - Smooth transitions
• Internationalization - Locale formatting

Implementation Checklist

• Calendar algorithm (days in month, leap years)
• Date parsing/formatting (multiple formats)
• Timezone handling (UTC storage, local display)
• Range selection (start/end dates)
• Time picker (hours, minutes, AM/PM)
• Min/max date constraints
• Keyboard navigation (arrows, Home, End, Page Up/Down)
• Screen reader support (ARIA, announcements)
• Locale support (date formats, first day of week)
• Month/year navigation
• Today indicator
• Selected date highlighting

Common Pitfalls

❌ No timezone handling → Dates shift unexpectedly
✅ Store in UTC, display in local timezone

❌ Poor keyboard navigation → Not accessible
✅ Arrow keys to navigate, Enter to select, Escape to close

❌ No date validation → Invalid dates selected
✅ Validate on input, restrict min/max dates

❌ Hardcoded date format → Doesn't work for all locales
✅ Use locale-aware formatting, support multiple formats