Lead:  Asaf Ben-Oved  

...

• By default, the From Field is highlighted

  • This field only allows manual input by keyboard

• Clicking outside the menu is equivalent to the Cancel operation

Selecting a From date

...

• Clicking anywhere on either of the displayed calendar months will select that date as From and update the From Input Field at the bottom and the External field ( should the External field be updated immediately )

• The focus will move to the To Field

• All dates prior to the From date are disabled

• 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

• Clicking outside the menu is equivalent to the Cancel operation

Selecting the To date

...

• Clicking on the To date will

  • Show range selection as selected

  • Update the To input field at the bottom

  • Enable all previously disabled dates (prior to 17 in the example)

  • Move the Focus back to the From input field

• Clicking outside the menu is equivalent to the Apply operation

Using the Time picker

Adding the times to the dates follows the same flow as the date picker.

<TBD>

Validations and errors

• Validation indication is presented immediately after the user makes the selection on the calendaric month

• If the user entered an invalid date in the manual field and tries to close the menu, use the behavior of connected cells in Field Validation

• Displayed error upon

  • Selecting a From date which is later than the To date

  • Selecting a To date which is earlier than the From date

Example of range picker (date and time):

...

Transitions

<<TBD>>

Best practices

...

• Use Range/Time picker over 2 Date picker whenever a user needs to select a period

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>>

...