Patterns

Date picker

The Date Picker allows the user to select a date range to view data for a particular time period. Additionally, the user is able to choose between comparing to previous period or previous year, when applicable.

ExamplesCopy URL

Date Picker
Date Picker

Quick Links
Quick Links

Visual Best PracticesCopy URL

Month and YearCopy URL

  • Font size: Size 100
  • Font weight: 600
  • Font color: Neutral 600

Day HeadersCopy URL

  • Font size: Size 100
  • Font weight: 600
  • Font color: Neutral 300

Day NumeralsCopy URL

  • Font size: Size 200
  • Font weight: 400
  • Font color: Neutral 700
    • Selected start/end: Neutral 0
    • Selected middle: Green 800
    • Hover selected start/end: Green 800
  • Cell background: Neutral 0
    • Selected start/end: Green 500
    • Selected middle: Green 100
    • Hover non-selected: Neutral 200

Interaction Best PracticesCopy URL

Date SelectionCopy URL

  • Upon clicking into a text input, 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
    • 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 an end date that is before the start date, it will also 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
  • Both the date range and comparison date range have a dropdown list which contains quick links for easy date range selection. Selecting a quick link (Last Month, This Month, Last Week , This Week) will automatically update the associated text inputs and date range.