Displaying the popover calendar

The calendar popover is displayed or hidden when the user selects the in-field button (the calendar icon).

Range selection

If a user selects a day preceding the first selection, that earlier day becomes the start of the range. For example:

• First selection: Jan 3. This is the start of the range.
• Second selection: Jan 1. This is the new start of the range.
• The range is now Jan 1–3 in the calendar popover and date field.

A third selection resets the range. For example:

• Third selection: Jan 4. This is the start of a new range.
• Current state: Jan 4 (no end of range). The calendar popover displays Jan 4 as the start of the range but with no defined end. The date field remains populated by the user's last complete input (Jan 1-3) until they indicate the end of their new range.

Individual segments for date field

Date pickers display placeholder values in individual segments by default. This is to makes it easier for users to focus and edit specific values like the day, month, or year without re-entering the entire date.

This approach reduces input errors, improves accessibility, and supports faster, more precise interactions. It also adapts well to different regional formats, enhancing clarity across locales.

Single date or date range

Date pickers can be used to select a single date or a date range (a start date and an end date).

Date range selection

When a date picker is formatted to allow a range, it displays a placeholder by default. When the user first interacts with the date field, the first value of the placeholder is in focus. This is to allow the user to edit the individual segments. When the user opens the popover without interacting, it displays the current day along with the month and year based on their locale. However, the date field will continue to show the placeholder until the user either completes the range in the field or within the calendar popover.

If the user inputs a date range within the date field that spans more than the maximum of three months that the calendar popover allows, the calendar popover will only show the first three consecutive months within that range.

Granularity

The date field can also capture time values with precision down to the second, and may include time zone information. The calendar popover can also include time-specific fields, allowing users to specify start and end times.