...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Lead: Asaf Ben-Oved
| Status | ||||
|---|---|---|---|---|
|
| Info |
|---|
Many of the Range Picker structure and behavior is based on Date Picker and therefore are not described in this page |
...
Type | Usage | Image |
|---|---|---|
Range picker (Dates only) | <<TBD>> |  |
Range picker (Dates and Time) | <<TBD>> |  |
Usage & Behaviour
General guidelines
...
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>>
<<used for specific components e.g. slider>>
Transitions
<<TBD>>
<<Used to describe transitions or animations the occurs in any of the interaction stages>>
...