Date and time pickers allow the user to pick their dates. There are emotive and productive date pickers, emotives are slightly larger whereas productive are smaller.
We also have variaties such as the date picker, a calendar option date picker and a start to end date picker.
To view these examples in light or dark theme switch the toggle on the top right.
The table below shows you the various types of date picker.
Always display helper text
Min-width: cal width
The table below shows you the various types of date picker with a calender option and its states.
Input dimensions: 48px
Input dimensions: 40px
Date pickers are used to display past, present, or future dates and/or times. Depending on the request, you can determine which picker is best to use.
When to use When you are asking for the date or time from the user, or scheduling a task.
|Date||When requesting just the date|
|Calendar||When requesting just a date but showing the calendar selectable option for in order for users to see dates aligned with days|
|Calendar range||Selecting a start to end date, displaying the calendar on click which will allow users to easily select the date range|