Lead: Asaf Ben-Oved
| Status | ||||
|---|---|---|---|---|
|
| Info |
|---|
Many of the Range Picker structure and behavior is based on Date Picker and <Time picker>, therefore, are not described in this page |
| Table of Contents |
|---|
Description
Range Picker allows the user to set a customized range of dates in a unified component.
...
When 2 consecutive months are displayed together on the menu, the arrows are disabled accordingly.
See example:
The date fields can be manually typed with no need to use the menu
Clicking either the From/To fields or the Date icon opens the menu with the relevant selection
Clicking the Icon is equivalent to clicking on the Form date
...
By default, the From Field is highlighted and text selected
Clicking outside the menu is equivalent to the Cancel operation
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 only If the hovered date is later than the currently selected date (or range)
Selecting The To date
Assuming user clicked on a date which is the same or later than the selected From date) the menu will be closed and dates updated
Clicking outside the menu (without selecting any date) is equivalent to the Cancel operation
Special Conditions
Clicking on either a populated From to To field will open the menu and highlight the selected date
On the range picker field
In case the user selects From - The next selection will update the From date and move focus to the To field
In case the user selects To - The next selection will update the To field and close the menu
whenever a user selects a date which is earlier than the currently selected From date, only the From date will update withouht changing focus in the range picker fields
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
...