Description

Range The range picker allows the user to set a customized range of dates using a unified component.

Range The range picker’s structure and behavior are based on the Date Picker, and are therefore are not repeated here.

...

Usage & Behavior

General guidelines

Structure

Range The range picker consists of:

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

  • From date. The start of the range.

  • To date. The end of the range.

• Date The date picker button. A calendar Icon Button which opens a the drop-down menu.

• Preceding label (optional).

• A drop-down range picker menu, which consists of:

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

  • Two - month calendars.

Component	Image	Comments
Range picker field	Image Modified	A string indicating the range (From - To) and an icon button. Next to the field, a preceding label can be set describing the purpose of the control.
Range picker menu	Image Modified	2 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 selected From (start) date, or a From (start) date which is later than the selected To (end) date.

• The range picker field will be updated in response to selections made in the calendar drop-downrange picker menu.

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

Image Removed

• DropImage Added

• Options should be disabled in the month and year drop-down selectors for months and years should be disabled to prevent a From date which is later than the To date. For example, if the From date is set to 2021, then 2020 and earlier will be disabled in the To date drop-down.

• The two date inputs in the range picker field can always be directly edited, with no need to use the calendar drop-downrange picker menu.

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

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

Image Removed

Image Removed

Image Removed

Interaction

...

Image Added

Image Added

Image Added

States

Date input field

State	Visual
Regular	Image Added
Hover	Image Added
Active	Image Added
Disabled	Image Added
Read-Only	Image Added
Error	Image Added
Warning	Image Added
Focused	Image Added
Focused, Hover	Image Added
Focused, Active	Image Added
Focused, Disabled	Image Added

Interaction

1. Clicking on the From field.

...

Opens the The menu is opened:

By default, the From field

The From text is highlighted in the

calendar (if exist), and the From text selected in the range picker field

range picker field. If one is already set, the From date is highlighted on the calendar. Clicking outside of the control is equivalent to

the Cancel operation (closes the dropdown

Cancel: the drop-down closes without applying any

change)

changes.

Image Removed

Image Added

2. Selecting the From date.

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

focus

highlight automatically moves to the To field. Clicking outside the menu

is equivalent to the Cancel operation.Image Removed

closes the drop-down without applying any changes.	Image Added
As the user hovers over another date, the dates between it and the selected From date should be highlighted. (The hover state is displayed only if the hovered date is later than the currently selected From date

or range

).

Image Removed

Image Added

3. Selecting the To date

Clicking on a date which is later than or the same

or later than

as the From date will: close the calendar drop-down

will close

. update the range picker field dates

will be updated

accordingly.

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

Image Removed

...

Image Added

• Directly editing an existing range.

Clicking on either

a

the From or To

field

fields will: select the date within the

fields and

range picker field, where it can be edited. open the drop-down menu with the date highlighted.

Image Removed

Additional case

Whenever a user selects

Image Added

• Selecting a date that is earlier than the

...

• selected From date

...

• .

The From field will

update without changing focus in the range picker fields. Image Removed

be updated to the new date.	Image Added
The To field will reset.

Image Removed

Image Added

Validations and errors

Validation is displayed on across the entire component.

Warning

Error

Comments

Image RemovedImage Removed

Image Added	In the example, the From date is later than the To date (manually entered).
Warning	Image Added

Transitions

The calendar drop-down Range picker menu should slide up and down and selecting .

Selecting the right and left arrows should swipe the dates horizontally the dates, see . See the Date Picker for an example.

A swipe transition is used when pressing the left and right arrows to navigate between the months, as shown in the Date Picker.

Best practices

Use:

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

Don’t use:

• when a default set of ranges is pre-defined → a Selector can be a better approach for offering different periods.

General

• If start and end times are also required, use the Time Picker component adjacent to the range picker. Example:

...

Accessibility compliance

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

Design

Zeplin link	Screen thumbnail

<TBD>

https://zpl.io/2ErLpDv

Image Added

Code

...