Date pickers are best suited for occasions when the user needs to provide a time window or a date.
The date picker input includes the input as well as the calendar dropdown.
Date and time pickers allow users to select a single or a range of dates and times.
|
Component |
Usage |
User action |
|---|---|---|
|
Date picker input |
Use date pickers when you ask the user for a date or range of dates. |
Once clicked (active) it will show the calendar dropdown |
Anatomy
Structure
|
|
|
label
|
It must always show and name the information being asked to the user. |
|
placeholder |
If the input is not filled. The inner text should display a short instruction of the user, in a call-to-action tone, e.g. "Choose a date". Suggested date format: 7 Jan 2022 |
|
calendar icon |
The icon indicates the calendar dropdown is available |
|
month |
--- |
|
year inline-dropdown |
Allows the selection of the year When clicked, triggers a native dropdown menu |
|
navigation |
Navigation through calendar months |
|
weekdays |
--- |
|
days |
--- |
|
captions |
Adjustable accordingly with requirements |
|
actions |
2 actions (Cancel and Apply) if the calendar is the "range" one. If you can only select 1 day, and 1 day only (single) then the Actions section is optional |
Sizes and spaces
|
The width of the element is flexible and they can vary accordingly to the need and the context.
All inner elements are responsive, so adaptable to the required width.
In-depth: Desktop and tablet calendar (max width: 544px to min width: 304px) - Inner elements of the calendar (days and weekdays) have a fixed size of 32x32, and a padding of 24px all around.
Mobile calendar (fixed width: 304px) - Inner elements of the calendar (days and weekdays) have a fixed size of 40x40, and a padding of 8px all around
Footer actions should have auto width.
Paddings and margins should be respected
|
Properties
Properties for the input
|
Property |
Values |
Description |
|---|---|---|
|
Size |
m l |
Use inputs size l as default. They work better in different resolutions/touchpoints (e.g. mobile and desktop). Use m sized forms if you have space constraints |
|
State |
default active hover filled disable error success read-only |
When active it means the user clicked on it, so the calendar should be shown just below the input (top margin:0px) |
Properties for the calendar
|
Property |
Values |
Description |
|---|---|---|
|
Selection |
single range |
Use single day calendar if you need to get a specific day from the user (e.g. Birthdate). Use range if the user is allowed to pick a range of dates (e.g. getting a report from day XX to day ZZ) |
|
Captions |
true false |
Captions are advisable, although they're not mandatory, they state what different colours mean when interacting with the calendar |
|
Actions |
true false |
By having actions we make sure the user is confident with his chosen date. Usually, these are used when range calendar is chosen |
Behaviour
Responsiveness
Calendar responsiveness