Date and time pickers are often used within forms. The user can type in a date and time in the correct format, or select a date and time from the calendar. The calendar appears on click of the date picker’s trigger.
The placeholder text within a date and time picker should reflect the correct date and time format. If the user enters a valid date or time, but in a different format, the field should correct to the accepted format, without the user having to re-format their entry.
Variations
Date picker
The date picker allows the user to select a single date, either by typing it into the field or by selecting it from the calendar widget.
Time picker
The time picker allows the user to select a specific time. The user can type it in the field or select the correct time by using the arrows within the widget.
Date and time picker
The date and time picker allows the user to select a single date and time, either by typing it into the field or by selecting both from the widget.
Date range picker
The date range picker allows the user to select a date range, by selecting two separate dates. The user can type the range into the field or select start and end dates from the calendar widget.
Start and end date picker
The start and end date picker allows the user to select two different dates, using two different date pickers. The start and end date picker allows for clearer labeling for the field group and for each of the date pickers, and is generally used for selecting start and end dates.
Group Label