Lead:  Asaf Ben-Oved  

Description

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

Usage & Behaviour

General guidelines

Structure

Component	Image
Range picker field (Dates only)
Range picker menu (Dates only)
Range picker field (Dates and Time)
Range picker menu (Dates and Time)
Added presets Range picker	phase 1 see examples in Sketch

The Range picker 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.

Content

• Usually used with a label “Date range”.

• The bottom manual field also displays the selected dates from the top calendar months

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.

• Manual input

  • When a user selects a month both the Range picker and manual fields updates automatically

  • When a user enters a manual date both the Calendaric month and range picker field

    

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

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

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