Lead: Asaf Ben-Oved
| Status | ||||
|---|---|---|---|---|
|
...
Range Picker allows the user to set a customized range of dates with or without hours in a unified component.
...
<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case each type should be described in a sub-page >>
<<If you are using this section Usage & Behaviour should be used only for the Common functionalities in the page>>
...
Type
...
Usage & Behaviour
General guidelines
Structure
Component | Image | |||
|---|---|---|---|---|
Range picker field (Dates only) | <<TBD>> |  | | |
Range picker menu (Dates only) |  | |||
Range picker field (Dates and Time) | <<TBD>> |  | Advanced | |
Range picker menu (Dates and Time) |  | |||
Added presets Range picker |
|
Usage & Behaviour
General guidelines
Structure
...
see examples in Sketch |
The Range picker field is composed of a string indicating the range (start - end) and an icon. Next to the field, a label would be set.
...
The menu Menu is composed of 2 consecutive calendar months horizontally displayed. From left (start) to right (end). The direction might change according to RTL languages.
Beneath each of the calendar months, a manual input field is displayed.
Content
Usually used with a label “Date range”.
The bottom manual field also displays the selected dates from the top calendar months
...
Content
...
Internal Logic
The months are always coupled which means the user always sees 2 consecutive months.
For example, if the user chooses to see the Januar 2020 on the End month (right side), the left side will show December 2019.
...
Manual input
When a user selects a month both the Range picker and manual fields updates automatically
When a user enters a manual date both the Calendaric month and range picker field
Interaction
The external field can only be clicked upon, no manual entry of dates
Selection is always From (start) date -> To (end) date
Opening the menu
Clicking anywhere in the external field will open the menu
...
By default, the From Field is highlighted
This field only allows manual input by keyboard
Clicking outside the menu is equivalent to the Cancel operation
Selecting a From date
...
Clicking anywhere on either of the displayed calendar months will select that date as From and update the From Input Field at the bottom and the External field (
should the External field be updated immediately )The focus will move to the To Field
All dates prior to the From date are disabled
Clicking outside the menu is equivalent to the Cancel operation
Hovering for the To Date
...
A “trail” of hovered dates will be presented as the user hovers to select the To date
Clicking outside the menu is equivalent to the Cancel operation
Selecting the To date
...
Clicking on the To date will
Show range selection as selected
Update the To input field at the bottom
Enable all previously disabled dates (prior to 17 in the example)
Move the Focus back to the From input field
Clicking outside the menu is equivalent to the Apply operation
Validations and errors
<<TBD>>
...
Validation indication is presented immediately after the user makes the selection on the calendaric month
If the user entered an invalid date in the manual field and tries to close the menu, use the behavior of connected cells in Field Validation
Displayed error upon
Selecting a From date which is later than the To date
Selecting a To date which is earlier than the From date
Example of range picker (date and time):
...
Transitions
<<TBD>><<Used to describe transitions or animations the occurs in any of the interaction stages>>
Best practices
<<e.g. Slider should display a label its on>>
...