Date Picker: extend to support date range selection

[Spark450]

Acceptance Criteria

• Range selection functionality:

  • The user can select two dates: a start date and an end date.
  • The selected date range should visually highlight all dates between the start and end dates.
  • The user should be able to enter or change a date by clicking on a specific date or navigating with the keyboard.

• Accessibility:

  • All functionality of the date range picker is accessible using a keyboard.
  • Screen reader support ensures that date selections and range limits are clearly announced.
  • Integration and compatibility:
  • The extended component should be compatible with existing forms and workflows that use the single date picker.
  • Ensure that the extended component retains all customizable properties of the original single date picker.

• User interface:

  • Visual cues should distinguish between selected, highlighted, and disabled dates.

Working example with keyboard support

https://codyhouse.co/ds/components/app/date-range

Latest Figma designs

https://www.figma.com/file/dcR7GrX9kBvnLxA71m2ia8/Component---Date-picker?type=design&node-id=2506%3A20596&mode=design&t=cngLncBKd6Kssz0f-1