| Table of Contents |
|---|
Description
| Status | ||||
|---|---|---|---|---|
|
Date picker allows users to select or 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 input field, the user can enter a date directly or select it using the date picker.
Date picker icon - clicking the icon opens the calendar
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. Date input field. 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/mm/yyyy).
Date picker button. A calendar Icon Button which opens the calendar drop-down.
Calendar drop-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 |  | |
Hover |  | |
Active |  | |
Disabled |  | |
Read-Only |  | |
Error |  | |
Warning |  | |
Focused |  | |
Focused, Hover |  | |
Focused, Active |  | |
Focused, Disabled |  |
Calendar
The current day and the selected date are highlighted
...
Content
In the calendar 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.
...
States
Add warning
...
Interaction
Input.
The calendar may contain dates which the user cannot select. Those dates should be disabled.
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 |  | |
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 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
overwriteedit 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.
...
Clicking the down arrow near the month and year header will open another popover which allows the user to choose a specific month or year:
...
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:
...
...
Calendar pickers should be used for events close to the present time. For users who choose dates far in advance because they require too much navigation to get to the desired input; for these users, it would be faster to simply type the year.
Typing the date is the most basic option for date input, yet in many cases it is the most efficient one, especially when the date is further away in the past (e.g., birthdate) or future. We recommend that you allow users to type the date even if other input methods are available.
Provide a help text that gives the user an idea of the required date format is a way of preventing input errors.
Design
...
Zeplin Link
...
Thumbnail
...
...
WFM Calendar:
...
Calendar Group Adherence:
...
New LUX design
...
| sanitize | false |
|---|
...
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 which shows the required date format. This will help to prevent input errors.
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 |
|---|---|---|
| | |
Tab |
| Cycles through the different elements in the following order:
|
Shift + Tab |
| Reverses the order of navigation described for Tab. |
Space |
|
|
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 |
|
|
Mouse | Date picker field | Date picker menu |
|---|---|---|
Right click | Set Focus state on field | Set Regular state on component |
Design
Zeplin Link | Thumbnail |
|---|---|
 |
Code
...