Components

Date Picker

A date picker enables users to select a single date or range of dates in order to filter data for a particular time period.

Date selection

  • Upon clicking a trigger, the calendar pop-out should display with the current date range highlighted
  • Clicking on any date will select that date for the active text input
  • Dates that are not available cannot be selected, e.g., you cannot schedule a post in the past or review metrics/data in the future

Single date selection

In general, after a date selection has been made, the date picker should disappear or the user’s focus should shift, see below for guidelines for specific experiences:

  • Single selection date pickers displayed within a : Popout closes
  • Single selection date pickers displayed inline: no visual change
May 2021
June 2021
July 2021

Date range selection

  • If the user selects a start date that is past the end date, it will become the new start date and the end date will be removed
  • If the user selects a start date that is before or on the end date, it will also become the new start date and the end date will remain
  • If the user selects an end date that is before the start date, it will become the new start date and the end date will be removed
  • The user may also select the same start and end date for single-date selection
  • If selections match a date or date range preset, calendar should update to preset value
  • After selecting a start date via the calendar, move to the respective end date
  • After selecting an end date via the calendar, the date picker will close or focus on the next task
May 2021
June 2021
July 2021
August 2021

Comparison periods

Comparison periods are not a yet included as part of a global component.
A date picker showcasing date comparisons
  • remains open until dismissed by user.
  • Comparison time periods match the current time period by default.
  • is used as the accent color in comparisons.

Preset comparison date range

After selecting a date range end date, the date picker will remain open until dismissed by the user.

Custom comparison date range

By selecting “custom” the user now manually selects the time period. After selecting a date range end date, the selection shifts to the comparison period. After selecting a comparison date range end date, the date picker will remain open until closed manually to allow the user to validate input and make any changes before applying their selections. Focus is returned to the original time period.

Content indicators

Volume indication is not a yet included as part of a global component.

Content indicators can be used to show that content exists on a calendar day.

Disabled states

Disabled states should follow form element and button rules around disabled styles.

Date range and comparison date range experiences feature quick links for easy date range selection.

Selecting a quick link (e.g., Last Month, Last 28 days or Last Week) will automatically update the associated text inputs and date range.

  • Preset selections can be overridden by manual date selection
  • Analytics has a specific order for presets:
    • Custom
    • Last 7 days
    • Last Week
    • Last 28 days
    • Last Month
  • Order presets and quick links by the most recent date in the set e.g., “Custom, Last 7 Days, Last Week, Last 28 Days, Last Month”

Resources