...

• A field with two date inputs:

  • From date. The start of the range.

  • To date. The end of the range.

• Date picker button. A calendar Icon Button which opens a drop-down menu.

• A drop-down menu, which consists of:

  • Range picker menu, with a month and year pickers for each half of the calendar.

  • Two-month calendars.

...

• The months displayed in the menu can be changed independently.

  • The user cannot select a To (end) date which is earlier than the From (start) date, or a From (start) date which is later than the To (end) date.

• The range picker field will be updated in response to selections made in the calendar drop-downrange picker menu.

• When 2 consecutive months are displayed together on the menu, the arrows are disabled accordingly, so that the From month cannot be moved forward and the To month cannot be moved backward:

...

• Drop-down selectors for months and years should be disabled to prevent a From date which is later than the To date.

• The two date inputs in the range picker field can be directly edited, with no need to use the calendar drop-downrange picker menu.

• Clicking either the From or To fields or the date picker icon will open the calendar drop-down range picker menu with the relevant date selected (either From or To).

  • Clicking the date picker icon is equivalent to clicking on the From date.

...

Clicking on a date which is the same or later than the From date: the calendar drop-down will close. the range picker field dates will be updated accordingly. Clicking outside the menu (without selecting any date) is equivalent to the Cancel operation .

4. Editing an existing range

...

Whenever a user selects a date that is earlier than the currently selected From date, only the From field will update without changing focus in the range picker fields.
The To field will reset.

Validations and errors

Validation is displayed on the entire component.

Warning	ErrorComments
	Image Added
Image Removed	In the example, the From date is later than the To date (manually entered).

Transitions

The calendar drop-down Range picker menu should slide up and down and selecting the right and left arrows should swipe horizontally the dates, see in the Date Picker.

...

• when a default set of ranges is pre-defined → a Selector can be a better approach for offering different periods.

General

• If start and end times are also required, use the Time Picker component adjacent to the range picker. Example:

...

Code

...