Description

...

State	Visual
General
Regular (x2 in size)
Hover (x2 in size)
Active (x2 in size)
Selected (x2 in size)
Disabled / Greyed out (x2 in size)		In case of greyed out the cursor will still be shown as a hand.
Today (x2 in size)

Internal logic

• Unavailable days will be disabled.

Interaction

The date can be set either via direct input or by using the controls in the calendar selectorsdrop-down. Additional keyboard interaction can be found under the focus management section below.

Direct input

• The date picker can have an initial value, which the user can edit at any time.

• Clicking the date input field will change it to a Text Field, where the user can directly type the required value.

• Allow the user When clicking on the text, the relevant input section will be highlighted (MM, DD, or YYYY).

• Once an input section is filled, the highlight will move to the next section.

• On Apply, the date picker field will lose focus (nothing is highlighted).

• The user should be allowed to enter dates in loose formats, where possible, which . These should be automatically corrected when the field loses focus (e.g. 12.03.20 and 12. For example, 1/3/20 21 should both be auto-corrected to 1201/03/2020)2021.

Calendar drop-downDate picker menu

• Clicking on the calendar Icon Button or any blank space will open the calendar drop-downdate picker menu.

• The calendar drop-down date picker menu will be closed either:

  • when a date is selected, or

  • by clicking outside the calendar drop-down.

• Clicking the left and right arrows on the calendar moves backward and forward between the months.

• • date picker menu.

Validation and Errors

Please refer to Field Validation page for more information.

A date field with a warning will have an orange border and a warning icon, as displayed below: 

A date field with an error will have a red border and an error icon, as displayed below:

Transitions

• A slide down transition is used when the menu opens.

• A swipe transition is used when pressing the left and right arrows to navigate between the months.

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Keyboard	Date picker field	Date picker menu
	Image Added	Image Added
Tab	Navigates the input section from left to right. When on the last input section, the highlight will move to the next component.	Cycles through the different elements in the following order: Left arrow. Month menu. Year menu. Right arrow. The focused day on the calendar. (By default, this is the current day).
Shift + Tab	Navigates the input section from right to left. When on the first input section, the highlight will move to the previous component.	Reverses the order of navigation described for Tab.
Space	Opens the date picker menu. Removes the section highlight.	When a day is highlighted - Sets the currently-selected date and closes the menu. On month/year - Opens the menu. On right/left arrows - Navigates between months accordingly.
Enter	Applies the date.	Sets the currently-selected date and closes the menu.
Esc	N/A	Closes the menu and returns the focus to the field, without applying any changes.
Arrows	Up - Increases the value of the highlighted input section. Down - Decreases the value of the highlighted input section. Right/Left - Moves the input highlight accordingly.	When a day is highlighted - All arrow keys (up, down, left, right) navigate between the days accordingly. On the last day of the month - Right arrow key will navigate to the first day of the next month. On the first day of the month - Left arrow key will navigate to the last day of the previous month. On month/year - Down arrow key will open the menu.

Design

Zeplin Link	Thumbnail
https://zpl.io/aNXBPk2

...