eLead: Asaf Ben-Oved
...
By default, the From Field is highlighted and text selected
Clicking outside the menu is equivalent to the Cancel operation
2. Selecting the From date
...
The selected date is indicated
The focus moves to the To field
Clicking outside the menu is equivalent to the Cancel operation
A “trail” of hovered dates will be presented as the user hovers to select the To date. Hover state is displayed only If the hovered date is later than the currently selected date (or range)
...
Clicking on a date which is the same or later than the From date, the menu will close and field dates updated accordingly
Clicking outside the menu (without selecting any date) is equivalent to the Cancel operation
Additional cases
Clicking on either a From or To field will highlight the fields, select the dates and will open the menu
 |
...
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 any previous date will update the From field and keep the To field selected |
 |  |  |
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
...
The menu should slide up-down (the same as Date picker)
<TBD animations>
Best practices
Use Range picker whenever a user is required to set a custom period
Don’t use range picker when a default set of ranges can be pre-defined to satisfy the user. a Selector - Segmented button can be a better approach for offering different periods.
If start-end times are also required, use the time picker component in adjacent with the range picker
for example:
...
Zeplin link | Screen thumbnail |
|---|---|
<TBD> |