Description

...

 Date picker allows users to Date pickers allow the user to either select or manually enter a single date at a required format. 

...

Usage & Behavior

General guidelines

Structure

A date picker is a combination Date pickers consist of:

• Input

  In the

  Date input field

  , the user can enter a date directly or select it using the date picker.

  . The date can be directly edited here, in the required format. If there is no default date, the input will show a hint text indicating the desired format (for example

  - “dd

  , dd/mm/

  yyyy”

  yyyy).

• Date picker icon - clicking the icon button. A calendar Icon Button which opens the calendar drop-down.

• Calendar Picker -The date picker calendar lets users pick a date using touch, mouse, or keyboard input. The control also allows users to navigate directly from one month or year to another. 

States

• Inputdrop-down, which consists of:

  • Month calendar, which allows the user to pick a specific date using mouse or keyboard input.

  • Month and Year selectors, which allow the user to directly select a specific month or year. 

  • Left and Right arrows, which allow the user to navigate backward or forward one month at a time.

States

Date input field

State	Visual
Regular

Image Removed

Image Added
Hover

Image Removed

Image Added
Active

Image Removed

Image Added
Disabled

Selected

Image Added

Disabled

Read-Only

Image Removed

Image Added
Error

Image Removed

Image Added
Warning

Image Removed

Image Added
Focused

Image Removed

Image Added
Focused, Hover

Image Removed

Image Added
Focused, Active

Image Removed

Image Added
Focused, Disabled

Image Removed

Image Added

Calendar

• The current day and the selected date are highlighted

  as follows:Disabled dates -

  .

• The calendar may contain dates which the user cannot select. Those dates

  will

  should be disabled.

  A month may start/end
• at the beginning/end of the week but not necessarily. This means that slots from previous or next months will be shown using a different color

  Days from the previous or next month, seen in the first or last weeks, should be greyed out (with the cursor still shown as a hand).

State	Visual
General

(x2)

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

Interaction

...

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 drop-down. Additional keyboard interaction can be found under the focus management section below.

Direct input

• The date picker can have an initial value

  that

  , which the user can

  overwrite

  edit at any time.

• Open the calendar with one click on the picker button.

• Calendar

• Close the calendar either by choosing a date (clicking on it), or clicking outside the frame.

Clicking the left and right arrows on the calendar moves between the months, respectively

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. These should be automatically corrected when the field loses focus. For example, 1/3/21 should be auto-corrected to 01/03/2021.

Date picker menu

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

• The date picker menu will be closed:

  • when a date is selected, or

  • by clicking outside the date picker menu.

Validation and Errors

Please refer to Field validationValidation 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.

Best practices

• Provide a help text that gives the user an idea of which shows the required date format is a way of preventing . This will help to prevent input errors.

• Use a loose format - If the user enters a different date format in the input field (for example - “12.03.20“) the system will switch to the standard format when the field loses focus.

Design

...

Zeplin Link

...

Thumbnail

...

https://zpl.io/aNXBPk2

...

New LUX design 

...

...

• When it’s important to go back to the current day, consider adding a Today button.

Accessibility Compliance

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	Image Added

Code

...