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

...

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:

Accessibility compliance

Follow the A11y described in Date pikcerUnless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design