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:

• Drop menus for Months and years should be disabled to prevent a From date which is later than the To field

• 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. Hover state is displayed only If the hovered date is later than the currently selected date (or range)

3. Selecting The To date

• Clicking on a date which is the same or later than the From date, the menu will close and field dates updated accordingly

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

Additional cases

• Clicking on either a From or To field will highlight the fields, select the dates and will open the menu

• If the From field is selected - The next selection in the menu will move focus to the To field

• If the To field is selected - The next selection closes the menu

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

			Selecting any previous date will update the From field and keep the To field selected

• 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 is displayed on the entire compoent

Warning	Error	Comments
		in the example: The From date is later than the To date (manually entered)

Transitions

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

<TBD animations>

Best practices

• Use Range picker whenever a user is required to set a custom period

• Don’t use range picker when a default set of ranges can be pre-defined to satisfy the user. a Selector - Segmented button can be a better approach for offering different periods.

• If start-end times are also required, use the time picker component in adjacent with the range picker
  for example:

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design