Lead: Asaf Ben-Oved
| Status | ||||
|---|---|---|---|---|
|
...
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). |
...
Usually used with a label “Date range”.
The top manual field displays the selected dates aligned with the calendric month
If the range spend more than 2 months, the display of the calendric months will be set according to the selected field (From or To)
...
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 Calendric month and range picker fieldIf the range spend more than 2 months, the display of the calendric months will be set according to the selected field (From or To)
The top manual field displays the selected dates aligned with the calendric month
Interaction
The date fields can be manually typed with no need to use the menu
Selection flow is From (start) date -> To (end) date unless some exceptions (see below)
...
By default, the From Field is highlighted and text selected
Any selection on the menu will be considered as the From date
Clicking outside the menu is equivalent to the Cancel operation
Selecting a From date
...
Any selection on the menu will be considered as the From date
From field will be updated immediately
The focus will move to the To Field and reset it
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 only If the hovered date is later than the currently selected date (or range
In case the user selects prior dates to the 1st date of the range the From field will update but focus will remain on the To field (the user didn’t complete selecting the To date yet)
Clicking outside the menu is equivalent to the Cancel operation
Selecting the To date (Happy user flow end)
...
Clicking on the To date will
Show range selection as selected
Update the To input field at the bottom
Removes all focus from the fields
Changes the Date icon to a “v” icon
Clicking on the V is equivalent to clicking outside the menu
Clicking outside the menu is equivalent to the Apply operation
Validations and errors
...
<<Make sure the components support screen reader for content or behaviour behavior where needed - see Screen Reader Guidelines >>
...