eLead: Asaf Ben-Oved
| Info |
|---|
Many of the Range Picker structure and behavior is based on Date Picker and <Time picker>, therefore, are not described in this page |
| Table of Contents |
|---|
Description
Range Picker The range picker allows the user to set a customized range of dates in using a unified component.
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
The direction might change according to RTL languagesrange picker consists of:
The range picker field, with two date inputs:
From date. The start of the range.
To date. The end of the range.
The date picker button. A calendar Icon Button which opens the drop-down menu.
Preceding label (optional).
A drop-down range picker menu, which consists of:
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 preceding label |
can be set describing the purpose of the control. | ||
Range picker menu |  | 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
ToFrom (start) date which is later than the
Fromselected 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 range picker menu.
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 , so that the From month cannot be moved forward and the To month cannot be moved backward:
Options should be disabled in the month and year drop-down selectors to prevent a From date which is later than the To fieldThe date fields can be manually typed 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 range picker menu.
Clicking either the From/ or To fields or the Date icon, opens the date picker icon will open the range picker menu with the relevant selectiondate selected (either From or To).
Clicking the Icon date picker icon is equivalent to clicking on the Form date
   |
Interaction
Happy flow
...
From date.
 |  |  |
States
Date input field
State | Visual |
|---|---|
Regular |  |
Hover |  |
Active |  |
Disabled |  |
Read-Only |  |
Error |  |
Warning |  |
Focused |  |
Focused, Hover |  |
Focused, Active |  |
Focused, Disabled |  |
Interaction
1. Clicking on the From field.
...
The menu opens
...
is opened:
|
...
|
...
|
...
|
...
|  |
2. Selecting the From date
...
.
|
...
|
...
|  |
|
...
|
...
|
 |
3. Selecting The the To date
|
...
|
...
|
...
|
...
|
...
Clicking outside the menu (without selecting any date) is equivalent to the Cancel operation
...
| |
Directly editing an existing range.
|
...
|
...
...
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 a date that is earlier than the selected From date.
|  |
|  |
Validations and errors
Validation is displayed on across the entire compoent
...
component.
Error |
|---|
Comments
 | In the example |
, the From date is later than the To date (manually entered). | ||
Warning |  |
|---|
Transitions
The Range picker menu should slide up -down (the same as Date picker)<TBD animations>and down.
Selecting the right and left arrows should swipe the dates horizontally. 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 can be is 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:
...
Accessibility compliance
Follow the A11y described in Date pikcerUnless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Code
...