eLead: Asaf Ben-Oved
| Status | ||||
|---|---|---|---|---|
|
...
When 2 consecutive months are displayed together on the menu, the arrows are disabled accordingly.
See example:
Drop menus for Months and years should be disabled to prevent a From date which is later than the To field
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
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
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
Validations and errors
Validation is displayed on the entire compoent
Warning | Error | Comments | |||
|---|---|---|---|---|---|
<TBD> |  | Entire range picker: in the example: The From date is later than the To date (manually entered) | <TBD> |  | Single field: Error/Warning on a specific field in range picker |
Transitions
The menu should slide up-down (the same as Date picker)
...
Focus move between the From and To should be animated and smooth
<TBD animations>
Best practices
Use Range picker over 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:
Future Version (TBD)
...