Date Picker
Usage
When to Use
Use a date picker in combination with a select field to allow users to select a date, a range of dates, or a date in combination with a specific time.
When Not to Use
If users choose any other data except a date, use a select field in combination with a drop-down list instead.
Variants
Single Date
The single date variant lets users select exactly one date.
Range of Dates
The range of dates variant lets users select a starting date and an end date.
Date and Time
It is possible to allow users to enter a specific time on a particular date. For this, users select the date and enter the time with their keyboard afterward.
Additional Filter
Users should always be able to enter or change the selected date with the keyboard. For text-only select fields, you can ensure this by adding a filter into the date picker.
The additional filter is only used for text-only select fields. Don't use additional filters for outlined select fields.
Content
Use clear and descriptive labels. Labels should correspond to the input type of the different variants.
