DATE PICKER

When to Use

Example: checkout pickup — real DatePicker + time chips

  • Selecting a single date (birthdays, deadlines, event dates)
  • Selecting a date range (booking periods, report filters)
  • When you need to constrain selectable dates (min/max boundaries)

Usage Guidelines

DO

Use single mode for one-off date selection, range mode for start/end pairs. Pre-populate with a sensible default month (e.g. current month or the month of an existing value)

Don’t

Don't use DatePicker for time-only selection. Always provide minDate/maxDate when the valid range is known

Accessibility

  • Navigation buttons include aria-label for screen readers
  • Date cells have aria-label (full date string) and aria-pressed (selected state)
  • Disabled dates use the native disabled attribute — excluded from tab order
  • Full keyboard navigation supported via browser-native button focus