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.
...
...
Usage & Behaviour
General guidelines
...
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
...