Date Range Selector

---

Overview

While similar to the date/time picker, the date range selector differs with the user having to select a start and end date as opposed to just a single date and/or time.

The date range selector is split into two parts, the “condensed” field and the “expanded” state which is nested inside a medium sized sheet.

Key Feature

---

In the condensed field there are certain items that should be shown in order to provide users with guidance.

1. The calendar icon is a fixed element of the condensed input.
2. The label of the condensed input includes both the start and end dates.

---

When selected by the user, the date range selector is shown within a medium size sheet with the calendar element, alongside the ghost button for the month selection. Users can select their desire range through the button group at the bottom of the sheet, that also visualizes the selected range in the primary button label.

1. The shroud in the medium sheet must be shown for the date range selector.
2. In order to expedite user action, a group of chips is positioned at the top of the sheet to form a “shortcut” for users to select if needed.
3. To select a date range in other months, users can select the ghost button which is shown with a calendar icon that opens a month wheel picker.
4. The start and end selectors provide users with visual cues for a given date range.
5. This is the selected range.
6. At the bottom of the date range is the button group with a secondary and primary button with the label of the primary button being that of the date range schedule.

---

If users wish to change the month selection through the ghost button labelled with the month, the month wheel picker replaces the calendar element for users to with.

1. Ghost button is the entry point for modifying the month.
2. Month wheel picker replaces the calendar element and is a native OS component.

Usage

---