Skip to content

Add Date/Time Picker Components (DatePicker, TimePicker, DateRangePicker) #227

@ManojVysyaraju

Description

@ManojVysyaraju

Is your feature request related to a problem? Please describe.
QUI currently lacks date/time input components, which are essential for forms requiring date
selection (bookings, scheduling, filtering, etc.). Users must either use native HTML5 inputs
(inconsistent across browsers) or integrate third-party libraries that don't match QUI's design
system.

Describe the solution you'd like
Implement a suite of date/time picker components following QUI's established 3-tier architecture:

  1. DatePicker (Priority: High) - Single date selection with calendar popup
  2. DateRangePicker (Priority: Medium) - Start/end date range selection
  3. TimePicker (Priority: Medium) - Hour/minute/second selection
  4. DateTimePicker (Priority: Low) - Combined date + time selection

Components should include:

  • Calendar navigation (month/year)
  • Keyboard accessibility (arrow keys, Enter, Escape)
  • Min/max date constraints
  • Disabled date ranges
  • Multiple size variants (sm, md, lg)
  • Theme support (all QDS themes)
  • Localization support
  • Integration with React Hook Form / Angular Forms

Describe alternatives you've considered

  • Native HTML5 <input type="date"> - Inconsistent UI across browsers, limited styling
  • Third-party libraries (react-datepicker, antd DatePicker) - Don't match QDS design system
  • Building custom solutions - No consistency, duplicated effort

Additional context
Infrastructure: dayjs, @floating-ui/react, accessibility patterns already available
Expected scope: ~50-60 files for MVP (React DatePicker only)
Full implementation: ~100-130 files (similar to Stepper #221)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions