The Date Picker is used to select one or several dates, the hour picker is used to choose an hour.
Use the date picker when entering a date.
The date picker has three variants:
“Simple date”, a text field without icon allowing the user to enter a date using the keyboard.
“Calendar”, a text field with an icon that opens a calendar to allow the user to select a date.
“Range”, two text fields with icons allowing the user to enter a period of time.
Always show the calendar icon in the text field to make it clear to the user enters a date.
Use the date picker to enter a date in the near future (from a few days to a few years).
Opt for a numeric text field to enter a distant date.
Always allow manual entry of the date or the period of time.
The calendar must open on the current month and date, this should always be highlighted.
Simply choosing a value confirms the choice. You do not need an action button to confirm the entered text.
In cases when the requested date must be later than the current date, you must grey over and make the previous days unclickable (the same goes for opposite situations when the requested date must be prior to the current date).
The elements of the date picker are available in 4 states: Default, hover, selected, current day, focus, out of month.
The hour picker allows you to enter an exact time.
Simply use a text field with “hh : mm” as placeholder
If needed, you can add a Select next to the time text field allowing the user to choose from “AM” to “PM”.
Code & Design assets
Request code and design assets for creating user interfaces.