Description
ONGOING
Date and time pickers allow users to select a single or a range of dates and times.
A date picker is a combination of:
Input - In the input field, the user can enter a date directly or select it using the date picker. The system validates the entry and provides the user with feedback.
Picker -The date picker lets users pick a localized date using touch, mouse, or keyboard input. The control also allows users to navigate directly from one month or year to another.
The current day and the selected date are highlighted as follows:
...
Usage & Behavior
General guidelines
A time picker can have a preceding label, or not (see example below).
The label should be clear and short (limited to a single line).
...
States
Add warning
...
Interaction
Open the calendar with one click on the picker field.
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 will open another window which will allow the user to choose a specific month or year:
...
| Table of Contents |
|---|
Description
Time pickers allow the user to either enter a time manually or set hours and minutes using up and down buttons.
Two time pickers can be used, for start and end times, to allow the user to enter a time range.
...
Usage & Behavior
General guidelines
The user’s time format (24 hours or 12 hours) can be set by the user (in the preferences of the local application).
Structure
Time pickers consist of:
Time input field. The time can be directly edited here.
Time picker button. A clock Icon Button which opens the time picker drop-down.
Time picker drop-down, which consists of:
Hours and minutes fields.
Up and Down arrows. Clicking those arrows increases or decreases the hours and minutes in increments of 1.
AM/PM label. Appears when the user’s time format is set to 12 hours. Clicking this toggles between AM and PM.
Default
The time picker may have an initial value, which the user can edit at any time.
States
State | Visual |
| ||
|---|---|---|---|---|
Regular |  |
| ||
Hover |  |
| ||
Active |   |  |  | |
Disabled |  |
| ||
Read-Only |  | |||
Error |  |
| ||
Warning |  |
| ||
Focused |  |  |  |  |
Focused, Hover |  |
| ||
Focused, Active |  |
| ||
Focused, Disabled |  |
|
Interaction
The time can be set either via direct input or by using the controls in the time picker menu. Additional keyboard interactions can be found under the Focus management section below.
Direct input
The time picker can have an initial value, which the user can edit at any time.
When clicking the text, the relevant input section will be highlighted (HH, MM, or AM/PM.).
For example:
When HH or MM are highlighted, only numerical value inputs will be permitted.
When AM/PM is clicked on, it will toggle between the two options.
Once an input section has been filled, the highlight will move to the next section.
On Apply, the time picker field will lose focus (nothing is highlighted).
The user should be allowed to enter times in loose formats, where possible. These should be automatically corrected when the field loses focus. For example:
5 should be auto-corrected to 05.
when the time format is set to 12 hours, 15:08 auto-corrects to 03:08 PM.
Time picker menu
Clicking on the clock Icon Button or any blank space will open the time picker menu.
The time picker menu will be closed:
when a time is applied, or
by clicking outside of the time picker menu.
The time inputs are cyclical:
When the hour is set to 12 (in 12 hour time format), the up arrow loops the value back to 01.
When the hour is set to 23 (in 24 hour time format), the up arrow loops the value back to 00.
When the minutes are set to 00, the down arrow changes the value to 59.
When the minutes are set to 59, the up arrow changes the value to 00.
For AM/PM, the arrows are not cyclical. Up arrow will change to PM and Down arrow to AM.
Changing the time in the menu should immediately sync the direct input displayed time
Validation and Errors
Please refer to Field validation page for more information.
A time field with a warning will have an orange border and a warning icon, as displayed below:
...
A time field with an error will have a red border and an error icon, as displayed below:
...
Best practices
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.
Calendar pickers are especially useful for selecting a date range.
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
Design
Zeplin Link | Thumbnail |
|---|---|
 |
Current appearances in our products
Calendar Group Adherence:
...
New LUX design
...
Use when:
You want the user to select or set a time.
You want the user to select a time range. In this case, one time picker can be used to set the start time and a second one to set the end time.
Don’t use:
For any input other than time.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Time picker field | Time picker menu |
|---|---|---|
| | |
Tab |
| Navigates between the different sections in a cyclical order:
|
Shift + Tab |
| Reverses the order of navigation described for Tab. |
Space | Opens the time picker menu. |
|
Enter | Applies the time. |
|
Esc | N/A | Closes the menu and returns the focus to the field, without applying any changes. |
Arrows |
|
|
Mouse | Time picker field | Time picker menu |
|---|---|---|
Right Click | Set Focus state on field | Set Regular state on component |
Design
Zeplin Link | Thumbnail |
|---|---|
 |
Code
...