The date picker is an input field that allows you to select dates through textual input or mouse interaction with a calendar drop down.
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.
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.
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.
Atlassian primary Blue is shown when hovering over dates displayed in the calendar view.
Once a date has been selected, the calendar closes and shows the selected date in the input field.
When changing an already selected date, the currently selected date is highlighted with Pale Blue upon re-opening the calendar view.
The system makes smart assumptions and corrections allowing for flexible keyboard input.