Use the date picker when entering a date.
The date picker has three variants:
The user can navigate through the months by using the buttons on either side.
Always make sure to use the right visual style for the right information (see below).
The hour picker allows you to enter an exact time.
Two options:
Always show the calendar icon in the text field to make it clear to the user entering a date.
Don’t hide the icon because it won’t be clear for the user he needs to enter a date.
The calendar must open on the current month and date, which must be highlighted.
Don’t open to a random date.
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).
Make sure the user can actually select the selectable dates.
Always allow manual entry of the date or the period of time.
Don’t take off the manual entry.
Behaviours
The elements of the date picker are available in 4 states: Default, hover, selected, current day, focus, out of month.
Request code and design assets for creating user interfaces.
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.