Patterns

Date picker

Enables a user to select a single date or range of dates in order to filter data for a particular time period. When applicable, users may also select from pre-defined ranges.

Examples

Single Date Picker Not Selected
Single date selection unselected vs. selected states

Single Date Picker with Two Months
Single date selection calendars can either be shown as a single or a double calendar, side by side.

Single Date Picker
Volume indicators may be used to compare the amount of data associated with a particular day. In this example, it is used to show the volume of messages scheduled for each day over a two month period.

Date Range with Preset Options
Preset options can be used as a shortcut for a predefined range or a specific date e.g., `Yesterday`, `April`, `Previous 14 days`.

Multi Day Range
Custom range selection with preset options. The user will be able to select a custom range by selecting days on the calendar or then can select a preset range from the list.

Date Range with Comparison Period
This example shows multiple Date Picker calendars comparing two date ranges. Note: the secondary 'Compare to' range has a unique theme to provide a clear visual distinction between the date ranges.

Visual best practices

Month and year

StyleValue
Font sizeSize 200
Font weightbold
Font colorNeutral 800

Day headers

StyleValue
Font sizeSize 200
Font weightnormal
Font colorNeutral 800

Day numerals

StyleValue
Font sizeSize 200
Font weightnormal
Font color
Default
Neutral 800
Today
Blue 700
Selected start/end
Neutral 0
Selected middle
Neutral 0
Hover selected start/end
Neutral 0
Cell background
Default
Neutral 0
Today
Neutral 0
Selected start
Neutral 800
Selected middle
Neutral 800
Hover non-selected
Neutral 800
Hover selected
Neutral 1000
Middle selection range
Neutral 0
Cell background (Comparison calendar)
Selected start
Purple 800
Selected middle
Purple 800
Hover non-selected
Purple 800
Hover selected
Purple 1000
Middle selection range
Neutral 0
Border
Default
Neutral 0
Selected start 1px solid
Neutral 800
Selected middle 1px solid
Neutral 800
Hover non-selected none
Middle selection range 1px solid
Neutral 800
Border (Comparison calendar)
Default
Neutral 0
Selected start 1px solid
Neutral 800
Selected middle 1px solid
Neutral 800
Hover non-selected none
Middle selection range 1px solid
Purple 800

Trigger

The date picker’s trigger is a complex element whose appearance must be adaptable to the context in which it’s presented. The trigger is often of equal importance in the hierarchy as it’s surrounding elements. However, the elements surrounding a trigger may differ, therefore lies it’s need for visual flexibilty.

Button example

Select example

Interaction best practices

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: popout closes
    • Single selection date pickers displayed inline: no visual change
  • 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 end date and the start date will be removed
    • The user may also select the same start and end date for single-date selection
    • The selected start date should have a filled background color, the user’s selection range remains unfilled and outlined with a border until an end date is selected at which point each day in the range is filled to match the start date’s background color and the border visually disappears
    • If picker calendar 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
  • Multiple Date Range Selection (Comparison Periods)
    • Comparison date pickers: popout remains open until dismissed by user
    • Preset Comparison Date Range (Previous Period / Previous Year): After selecting date range end date, the date picker will remain open until dismissed by the user
    • Custom Comparison Date Range: After selecting date range end date, the selection is moved to the comparison period calendar, after selecting 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 and focus is returned to the first calendar’s start date

Comparison Interactions

  • Default options:
    • Custom
    • Previous Period
    • Previous Year
  • Previous Period defaults to the same number of prior days
  • Selecting a date range of calendar month or calendar year with “Previous Period” Comparison will default to prior calendar month, if the prior month / year and display warning calling out “Comparing X days to Y days”, examples:
    • March vs February
    • Year vs Previous Year (leap year)
    • February vs Previous February (leap year)
  • To get the same number of prior days, have to utilize the custom comparison period option

Disabled states

Disabled states should follow form and button rules around disabled styles

  • Both the date range and comparison date range experiences feature quick links for easy date range selection
  • Selecting a quick link (e.g., Previous Month, Previous 28 days or Previous 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, see “Do’s and Don’ts” section for additional guidelines
    • Custom
    • Previous 7 days
    • Previous Week
    • Previous 28 days
    • Previous Month
  • DO: Use “Previous” when describing a date range preset, e.g., “Previous 14 Days”
  • DO: Honor the user’s local timezone settings for week start day
  • DO: Order presets and quick links by the most recent date in the set e.g., “Custom, Previous 7 days, Previous Week, Previous 28 days, Previous Month”
  • DON’T: Use “This” or “Last” in preset descriptions, e.g., “This Week” or “Last 14 Days”

Resources