Lead:  Asaf Ben-Oved  ONGOING

Description

Range Picker allows the user to set a customized range of dates 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).

Internal Logic

• The months displayed in the menu can be changed independently

  • The user cannot select a To date which is earlier than the From date or a To date which is later than the From date.

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

• When 2 consecutive months are displayed together on the menu, the arrows are disabled accordingly.
  See example:

  

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

• Clicking either the From/To fields or the Date icon opens the menu with the relevant selection

  • Clicking the Icon is equivalent to clicking on the Form date

Interaction

Happy flow

1. clicking on the From field

The menu opens

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

• Clicking outside the menu is equivalent to the Cancel operation

2. Selecting the From date

• The selected date is indicated

• The focus moves to the To field

• Clicking outside the menu is equivalent to the Cancel operation

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

  

3. Selecting The To date

• Assuming user clicked on a date which is the same or later than the selected From date) the menu will be closed and dates updated

• Clicking outside the menu (without selecting any date) is equivalent to the Cancel operation

Special Conditions

• Clicking on either a populated From to To field will open the menu and highlight the selected date
  

  

• On the range picker field

  • In case the user selects From - The next selection will update the From date and move focus to the To field

  • In case the user selects To - The next selection will update the To field and close the menu

• whenever a user selects a date which is earlier than the currently selected From date, only the From date will update withouht changing focus in the range picker fields
  

  

• 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

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