Date picker

The date picker is an input field that allows you to select dates through textual input or mouse interaction with a calendar drop down.

Empty state

The neutral state is a text field with placeholder text to prompt the user to enter the correct date format. This format is decided by the settings of the system.

A calendar icon is shown within the text field to indicate that this is a date field and give affordance to the calendar drop down.

Date picker empty state example

Calendar view

The expanded calendar view is opened as soon as the text field becomes active. The calendar view is closed by either tabbing out of the text field or clicking outside of the calendar view any where else on the page. The calendar drop down also closes when a date is selected. This is done by either typing a date and pressing ENTER or by clicking on a date in the calendar drop down.

Clicking previous or next month paginates between the months of the year. Dates from the previous or next month that are in view are dimmed but still selectable.

Date picker calendar example

In Confluence, the calendar view is opened by typing double slash, '//'. No calendar icon is included in this case. Once a date has been entered the date is displayed as a lozenge with the calendar icon in it.

Date picker Confluence calendar example

Hover state

Atlassian primary Blue is shown when hovering over dates displayed in the calendar view.

Date picker hover state example

Selected date

Once a date has been selected, the calendar closes and shows the selected date in the input field.

Date picker selected date example

When changing an already selected date, the currently selected date is highlighted with Pale Blue upon re-opening the calendar view.

Date picker view selected date example

Input validation

The system makes smart assumptions and corrections allowing for flexible keyboard input.