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.
When to use date pickers
The date picker allows customers 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
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
