Date Picker
Search the component library

Date Picker

v2.0.0

Single date input

Use this type of date picker for picking a single date (e.g., assignment due date).

Default state

The single date picker consists of a specialized input field (including a calendar icon) and a calendar component. The calendar is hidden by default until users interact with the date input field. In the field label, include a formatting example (mm/dd/yyyy).

Focus state without selected date

Upon focus:

  • Default text remains and a cursor appears within the field.
  • Calendar appears. 

Note: Size of input isn't tied to width of calendar popup.

  • No date is selected by default.

Calendar closes when:

  • Users make a selection from the calendar.
  • Users start to manually type in the field.
  • Focus is lost from field or calendar when users click elsewhere.

If users close the calendar without making a selection, it reverts back to the default state.

Focus state with selected date

Upon focus:

  • Calendar appears and shows the selected date.
  • Text in the field is highlighted.

Note: Focus remains on the field until users click elsewhere.

Calendar closes when:

  • Users make a selection from the calendar.
  • Users start to manually type in the field.
  • Focus is lost from field or calendar when users click elsewhere.


Selected date with no focus

  • If users make a selection and remove 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

Start date focus without selection

When users interact with the start date input field, it gains focus and the calendar appears.

Double input field start date focus state

Start date focus with selection

End date focus without selection

After users select a start date, the focus should automatically switch to the end date input field and the calendar for the end date should open. 

Note: Selected start date and prior dates are disabled (e.g., gray colored dates before the 16th).

End date focus and highlight with selection

Reopening the start date after selecting both start and end dates

If users refocus on the start date after having selected both a start and end date:

  • Date picker appears with the start date selected.
  • 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 users choose a new start date:

  • Before the previously chosen end date, the end date selection will be retained and users will be automatically moved to the end date input field to confirm their selection.
  • After the previously chosen end date, the end date selection will clear and users will be automatically moved moved to the end date input field to select a new end date.

Manual entry

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

Default state

Focus state without selected date

Focus state with manual entry

  • Calendar closes as users type.
  • Users can enter any characters.
  • Localization can cause the date format to change.

Manual entry completed

Users complete 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.
  • Date text in the field is highlighted.
  • No dates are selected in the calendar.

Redlines

Input typeBasic with calendar icon
Minimum 150px width
Calendar typeWhite background
Fixed 320px width
Iconcalendar-18
Medium Gray
Padding-left 14px
Padding-right 14px

Changelog

2.0.0

Initial rebranded version