Simple date picker
An input to select one date.
Date picker
Date pickers allow users to select a single or a range of dates.
Usage
Date picker allows users to choose and input a date by manually typing the date into the input field or by using a calendar-like dropdown. The user can select a single date, date range or date and time.
When to use
Use date and time pickers when you are asking the user for a time or date, or for scheduling tasks.
Anatomy
Label: Text that indicate the date wanted by the date picker
Date field: Input that indicate the selected date
Icon: A calendar icon to indicate that a calendar will show on click
Calendar: A calendar where the user can select a date or a range of date
Calendar controls: Controls that allow the user to navigate in the calendar
Day: actual date
Selected date: The date selected shows in the Date Field
Label
The label should be speaking in the sense of the user's understanding, rather than in the system's language. The label must be short. The label can be accompanied by an icon.
Date Field
The date format in this field must correspond of the date format use by the user in his everyday life.
Icon
A simple icon of a calendar that indicate that a calendar will show up on click in the field.
Calendar
A calendar that allow the user to select past or future date.
Calendar controls
Tools to navigate across the calendar. The user must be able to select the month, the year and to navigate month by month.
Types
Date range picker
An input to select a time frame.
Placement
The calendar should have a fix width and be aligned on the left of the date field.
On mobile :
The calendar will go in full page until the user select a date.
Use multiple dropdowns to replace the calendar. For example, one dropdown for the day, another for the month and the third for the year. Align these dropdowns on the same line.
Do's & Don'ts
Do
Always show the calendar icon in the text field to make it clear to the user entering a date.
The calendar must open on the current date, which must be highlighted.
Non selectable dates should be grey over and unclickable.
Don't
Never take off the manual entry.
Don't open the calendar to a random date.