...

Much of the range picker’s structure and behavior is based on the Date Picker, and therefore are not repeated here.

Usage &

...

Behavior

General guidelines

Structure

...

• By default, the From field is highlighted in the calendar and the From text selected in the range picker field.

• Clicking outside of the control is equivalent to the Cancel operation.

2. Selecting the From date.

...

• The selected date is indicated on the calendar and in the range picker field.

• The focus automatically moves to the To field.

• Clicking outside the menu is equivalent to the Cancel operation.

• As the user hovers over another date, the dates between it and the selected From date should be highlighted. (The hover state is displayed only if the hovered date is later than the currently selected From date or range).

...

• Clicking on a date which is the same or later than the From date:

  • the calendar drop-down will close.

  • the entire date range will be selected.

  • the range picker field dates will be updated accordingly.

• Clicking outside the menu (without selecting any date) is equivalent to the Cancel operation.

Additional cases

...

The calendar drop-down should slide up and down (as with the Date Picker).

<TBD animations>

Best practices

Use:

• Whenever a user is required to set a custom period.

...

• When a default set of ranges can be pre-defined to satisfy the user → a Segmented buttonButton can be a better approach for offering different periods.

...

Code

...