...

...

Description

Range Picker allows pickers allow the user to set a customized range of dates in using a unified component.

Much of the range picker’s structure and behavior is based on the Date Picker, and therefore are not repeated here.

Usage & Behaviour

General guidelines

Structure

Range pickers consist of:

• A range picker field with two date inputs, for:

  • From date. The start of the range.

...

• • To date. The end of the range.

• Date picker button. A calendar Icon Button which opens the calendar drop-down.

• Calendar drop-down, which consists of:

  • Range picker menu, with month and year pickers for each half of the calendar.

  • Two month calendars.

Component	Image	Comments
Range picker field		A string indicating the range (From - To) and an icon button. Next to the field, a label would be set.
Range picker menu		2 calendric months horizontally displayed. From month calendars, displayed horizontally from left (start) to right (end). The direction of the dates might change according to RTL languages.

Internal Logic

• The months displayed in the menu can be changed independently.

  • The user cannot select a To (end) date which is earlier than the From (start) date, or a To From (start) date which is later than the From To (end) date.

• The top manual field displays the selected dates is aligned with the calendric monthrange picker field will be updated in response to selections made in the calendar drop-down.

• When 2 consecutive months are displayed together on the menu, the arrows are disabled accordingly
  See example, so that the From month cannot be moved forward and the To month cannot be moved backward:

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

• The date fields can be manually typed two date inputs in the range picker field can be directly edited, with no need to use the menucalendar drop-down.

• Clicking either the From/ or To fields or the Date icon, opens the menu date picker icon will open the calendar drop-down with the relevant selectiondate selected (either From or To).

  • Clicking the Icon date picker icon is equivalent to clicking on the Form From date.

Interaction

Happy flow

1. clicking Clicking on the From field.

The Opens the menu opens:

• By default, the From Field field is highlighted in the calendar and the From text selected in the range picker field.

• Clicking outside of the menu control is equivalent to the Cancel operation.

2. Selecting the From date.

• The selected date is indicated on the calendar and in the range picker field.

• The focus automatically moves to the To field.

• Clicking outside the menu is equivalent to the Cancel operationA “trail” of hovered dates will be presented as .

• As the user hovers to select the To date. Hover over another date, the dates between it and the selected From date should be highlighted. (The hover state is displayed only If if the hovered date is later than the currently selected From date ( or range).

3. Selecting The 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:

  • the calendar drop-down will close.

  • the entire date range will be selected.

  • the range picker field dates will be 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 , the next selection in the menu will move focus to the To field.

• If the To field is selected - The , the next selection closes will close the menu.

• whenever 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 compoentcomponent.

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

Transitions

The menu calendar drop-down should slide up -and down (as with the same as Date pickerPicker).

<TBD animations>

Best practices

Use

...

:

• Whenever a user is required to set a custom period.

Don’t use

...

:

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

General:

• If start -and end times are also required, use the time picker Time Picker component in adjacent with to the range picker
  for example. Example:

Accessibility compliance

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

Design