Versions Compared

Version Old Version 53 New Version Current
Changes made by

Carlie Bradshaw

Hasitha Jayarathne

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • The range picker field, with two date inputs:

    • From date. The start of the range.

    • To date. The end of the range.

  • The date picker button. A calendar Icon Button which opens the drop-down menu.

  • Preceding label (optional).

  • A drop-down range picker menu, which consists of:

    • Month and year pickers for each half of the calendar.

    • Two month calendars.

Component

Image

Comments

Range picker field

Image Modified

A string indicating the range (From - To) and an icon button.

Next to the field, a preceding label can be set describing the purpose of the control.

Range picker menu

Image Modified

2 month calendars, displayed horizontally from left (start) to right (end). The direction of the dates might change according to RTL languages.

Internal Logic

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

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

  • The range picker field will be updated in response to selections made in the range 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:

...

  • Range Picker - Among months.pngImage Added

  • Options should be disabled in the month and year drop-down selectors to prevent a From date which is later than the To date. For example, if the From date is set to 2021, then 2020 and earlier will be disabled in the To date drop-down.

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

  • Clicking either the From or To fields or the date picker icon will open the 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.

...

Range Picker - From.pngImage AddedRange Picker - To.pngImage AddedRange Picker - Same month.pngImage Added

States

Date input field

State

Visual

Regular

Range picker - Regular.pngImage Added

Hover

Range picker - Hover.pngImage Added

Active

Range picker - Active.pngImage Added

Disabled

Range picker - Disabled.pngImage Added

Read-Only

Range picker - Focused Read-Only.pngImage Added

Error

Range picker - Error.pngImage Added

Warning

Range picker - Warning.pngImage Added

Focused

Range picker - Focused.pngImage Added

Focused, Hover

Range picker - Focused Hover.pngImage Added

Focused, Active

Range picker - Focused Active.pngImage Added

Focused, Disabled

Range picker - Focused Disabled.pngImage Added

Interaction

1. Clicking on the From field.

...

The menu is opened:

  • The From text is highlighted in the range picker field.

  • If one is already set, the From date is highlighted on the calendar.

  • Clicking outside of the control is equivalent to Cancel: the drop-down closes without applying any changes.

Image Removed
Range Picker - From.pngImage Added

2. Selecting the From date.

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

  • The highlight automatically moves to the To field.

  • Clicking outside the menu closes the drop-down without applying any changes.

Image Removed
To.pngImage Added

  • 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).

Image Removed
Range selecting.pngImage Added

3. Selecting the To date

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

    • close the calendar drop-down.

    • update the range picker field dates accordingly.

Image Removed
Range picker - Regular.pngImage Added

  • Directly editing an existing range.

  • Clicking on either the From or To fields will:

    • select the date within the range picker field, where it can be edited.

    • open the drop-down menu with the date highlighted.

Image Removed
Range Picker - Directly editing an existing range.pngImage Added

  • Selecting a date that is earlier than the selected From date.

  • The From field will be updated to the new date.

Image Removed
Range Picker - Selecting a date that is earlier than the selected From date.pngImage Added

  • The To field will reset.

Image Removed
Range Picker - Selecting a date that is earlier than the selected From date 2.pngImage Added

Validations and errors

Validation is displayed across the entire component.

Error

Image Removed
Range picker - Error.pngImage Added

In the example, the From date is later than the To date (manually entered).

Warning

Image Removed
Range picker - Warning.pngImage Added

Transitions

The Range picker menu should slide up and down.

...

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

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Zeplin link

Screen thumbnail

https://zpl.io/2ErLpDv

Image Removed
Range Picker States.pngImage Added

Code

...