Lead:  Asaf Ben-Oved  

...

Range Picker allows the user to set a customized range of dates with or without hours in a unified component.

...

Sometimes used internally (Custom option) inside a Segmented button

...

Usage & Behaviour

General guidelines

...

• By default, the From Field is highlighted and text selected

• Any selection on the menu will be considered as the From date

• Clicking outside the menu is equivalent to the Cancel operation

Selecting a From date

...

• Any selection on the menu will be considered as the From date

• From field will be updated immediately

• The focus will move to the To Field and reset it

• Clicking outside the menu is equivalent to the Cancel operation

Hovering for the To Date

...

• A “trail” of hovered dates will be presented as the user hovers to select the To date only If the hovered date is later than the currently selected date (or range

• In case the user selects prior dates to the 1st date of the range the From field will update but focus will remain on the To field (the user didn’t complete selecting the To date yet)

• Clicking outside the menu is equivalent to the Cancel operation

Selecting the To date (Happy user flow end)

...

• Clicking on the To date will

  • Show range selection as selected

  • Update the To input field at the bottom

  • Removes all focus from the fields

  • Changes the Date icon to a “v” icon

    • Clicking on the V is equivalent to clicking outside the menu

• Clicking outside the menu is equivalent to the Apply operation

Validations and errors

...

• Adding a time picker within the menu so it will hold both dates and times at a unified component

• Add a reset button to clear all fields

Accessibility compliance

<<, In general, each component should be A11y complied,  please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in Keyboard & Focus Management Guidelines >>

Screen reader support 

<<Make sure the components support screen reader for content or behavior where needed - see Screen Reader Guidelines >>

Contrast & size compliance

<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>Follow the A11y described in Date pikcer

Design