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.