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

The direction might change according to RTL languages.

Component	Image	Comments
Range picker field		A string indicating the range (From - To) and an icon. Next to the field, a label would be set.
Range picker menu		2 calendric months horizontally displayed. From left (start) to right (end).

• The top manual field displays the selected dates aligned with the calendric month

  • If the range spend more than 2 months, the display of the calendric months will be set according to the selected field (From or To)

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.

• The top manual field displays the selected dates aligned with the calendric month

  • If the range spend more than 2 months, the display of the calendric months will be set according to the selected field (From or To)

  

Interaction

• The date fields can be manually typed with no need to use the menu

• Selection flow is From (start) date -> To (end) date unless some exceptions (see below)

Opening the menu (Happy user flow)

Clicking either the From/To fields or the Date icon opens the menu

Clicking on the From Field or Icon

• 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

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

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

• Displayed error upon Manually entering

  • From date which is later than the To date

  • To date which is earlier than the From date

Examples:

	Error on the entire range picker
	Error on a specific field in range picker

Transitions

• A transition from Date icon to “v” icon

• The menu should slide up-down (the same as Date picker)

Best practices

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

• If start-end times are also required, use the time picker
  for example:

  

Future Version (TBD)

• 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

Follow the A11y described in Date pikcer

Design