Lead:  Asaf Ben-Oved  ONGOING

Description

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

Types 

<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case each type should be described in a sub-page >>

<<If you are using this section Usage & Behaviour should be used only for the Common functionalities in the page>>

Type	Usage	Image
Range picker (Dates only)	<<TBD>>
Range picker (Dates and Time)	<<TBD>>

Usage & Behaviour

General guidelines

Structure

The input field is composed of a string indicating the range (start - end) and an icon. Next to the field, a label would be set.

The menu is composed of 2 consecutive calendar months horizontally displayed. From left (start) to right (end). The direction might change according to RTL languages.

Beneath each of the calendar months, a manual input field is displayed. The field also displays the selected dates from the calendar months

Content

Usually used with a label “Date range”.

Internal Logic

The months are always coupled which means the user always sees 2 consecutive months.

For example, if the user chooses to see the Januar 2020 on the End month (right side), the left side will show December 2019.

Interaction

• The external field can only be clicked upon, no manual entry of dates

• Selection is always From (start) date -> To (end) date

Opening the menu

Clicking anywhere in the external field will open the menu

• 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

Validations and errors

<<TBD>>

<<used for specific components e.g. slider>>

Transitions

<<TBD>>

<<Used to describe transitions or animations the occurs in any of the interaction stages>>

Best practices

<<e.g. Slider should display a label its on>>

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 behaviour where needed - see Screen Reader Guidelines >>

Contrast & size compliance

<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>

Design