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. You can also show placeholder text in the field.
- 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 date picker can have a preceding label, or not (see example below).
The label should be clear and short (limited to a single line).
States
Interaction
With one click on the picker field, the date picker opens.
To close the window, the user can select a date (which triggers the close event), or click outside the frame.
With the date picker, the user can see a day view, month view, or a year view.
The current day is colored blue and the selected date are highlighted with a grey background and a blue border:
Validation and Errors
Best practices
Design
Zeplin Link | Thumbnail |
|---|---|
| https://zpl.io/aNXBPk2 |
|
Current appearances in our products
WFM Calendar:
Calendar Group Adherence:
