Date Picker
Search the component library

Date Picker

v2.0.0

This component defines the standard interactions for the date picker component.

Usage Guidelines

Every instance of date selection should come from this component.

Features

  • Single and double input field interactions (single date vs. start/end dates)
  • Manual date entry

Single Date Input

This type of date picker is used for picking a single date (ex. assignment due date).

Default State

The single date picker consists of a specialized input field (including the calendar icon) and a calendar component.

By default the calendar is hidden until the user interacts with the date input field.

In the field label, provide formatting example (ex. mm/dd/yyyy).

Focus State (w/o selected date)

Upon focus:

  • The default text remains and a cursor appears within the field
  • The calendar appears. Note, the size of the input isn’t tied to the width of the calendar popup.
  • No date is selected by default

The calendar closes when:

  • The user makes a selection from the calendar.
  • The user begins to manually type in the field.
  • Focus is lost from field or calendar when the user clicks elsewhere.

If the user closes the calendar without making a selection, it reverts back to Default State.

Focus State (w/selected date)

Upon focus:

  • The calendar appears and shows the selected date
  • The text in the field is highlighted

The calendar closes when:

  • The user makes a selection from the calendar.
  • The user begins to manually type in the field.
  • Focus is lost from field or calendar when the user clicks elsewhere.

Note that for the first and second points, focus remains on the field until the user clicks elsewhere.

Selected Date (no focus)

  • If the user has made a selection and removed focus from the calendar or field, then the date field shows the numeric date.
  • If a field with a previously selected date regains focus, the field and calendar switch to Focus State (w/ selected date).

Range Input

This type of date picker is to be used for choosing a range with specific start and end dates (ex. course beginning and end).

Default State

The default state of the first date input (start) initially behaves the same way as a single date input field.

Default state of double input field date picker (start/end).

Start Date Focus w/o Selection

When the user interacts with the start date input field, it gains focus and the calendar appears.

Double input field start date focus state

Start Date Focus w/ Selection

End Date Focus w/o Selection

Once the user has made a start date selection, focus should automatically switch to the end date input field. The calendar for the end date should open. Note the selected start date and prior dates are disabled (ex. gray colored dates before the 16th).

End Date Focus and Highlight w/ Selection

Reopening the Start Date After Selecting Both Start and End Dates

If the user refocuses on the start date after having selected both a start and end date:

  • The date picker appears with the start date selected
  • The text in the field is highlighted
  • No disabled dates are shown

Making a selection will cause focus to automatically shift once again to the end date picker and field.

If the user chooses a new start date before the previously chosen end date, the end date selection will be retained and the user will be automatically moved to the end date input field to confirm their selection.

If the user chooses a new start date after the previously chosen end date, the end date selection will clear and the user will be automatically moved moved to the end date input field to make a new end date selection.

Manual Entry

This section pertains to manual entry of dates directly into the input field.

Default State

Focus State (w/o selected date)

Focus State with Manual Entry

  • The calendar will close as the user types.
  • User can enter any characters
  • Localization could cause date format to change

Manual Entry Completed

User completes manual entry by blurring the input field.

Error Messages

Default State

Error text below the field.

Reopening the date picker

  • Calendar appears below the error text.
  • The date text in the field is highlighted.
  • No dates are selected in the calendar.

Redlines

Input Type
  • Basic with calendar icon
  • Minimum 150px width
Calendar Type
  • White background
  • Fixed 320px width
Icon
  • calendar-18
  • Medium Gray
  • Padding-left 14px
  • Padding-right 14px

Changelog

2.0.0

Initial rebranded version