The date picker lets users select a single date (a day) or a date range (a week) with an interface that looks like a calendar and is just as straightforward to use.

Usage

The date picker allows users to select a date using a calendar view. The calendar appears when the focus is placed on a date text field.

  • The currently selected date appears with a green border.
  • When present, special dates (such as holidays) appear in orange. On hover, a tooltip appears, containing a concise label for the corresponding special date. (Please note that the described hover functionality is not implemented in the example below.)
  • Blackout dates are specific days that users can’t select. They have priority treatment over special dates. For example, if a date is both a special date and a blackout date, it will receive the blackout date treatment. To help users understand why these special dates and blackout dates appear as they do, a tooltip appears when the user hovers over the unique date.

 

Appearance and behavior

  • Current date: background #FFFFFF, text #2CA01C, circle 26px *
    26px #2CA01C
  • Selected date: background #2CA01C, text #FFFFFF demi
  • Selected date range: background #2CA01C, text #FFFFFF demi
  • Notable date (for example, a birthday): orange text #FF6A00
  • Blackout date: background #393A3D, text #BABEC5 with slash #393A3D
  • Grayed out dates: #8D9096

 

Date picker default
Date range picker
-start
Date range picker
-completed
Week picker

A week picker allows the user to select any week from the calendar. The user can select a week by clicking on the calendar popover, by typing in the form field, or by a combination of the two methods.

Content guidelines

  • Labels are sentence case. Example: Payday schedule
  • Spell out the months.
  • Don’t use leading zeros in single-digit months or days of the week. (Yep, we know the behavior is a little off right now. We’re working on a fix.)
  • Day indicators are capitalized (S, M, T, etc.).
  • In tooltips, abbreviate the months. Examples: Jan, Aug, Nov

Examples

Date picker

Date range picker

  • Was this Helpful?
  •