Date Picker Variations
Basic Date Picker
To select a single date on the calendar. Users can manually
insert the date on the input field or choose a date from the
calendar view by clicking the calendar icon.
Date Range Picker
{{ date.day }}
To select a beginning date and an end date as the date range.
As users choose the beginning and the end date on the calendar
view, two of the input fields will be updated accordingly,
Guideline
• Always use a brief label on the input field to instruct the user
what needs to be done. For example, “Birth Date”, “Select Period”
• Always provide a placeholder text with the format date. For
example, “DD/MM/YYYY”
• Indicate the current date on the calendar view.
• Depending on the context, have a selected date as the default
date. For example, “Today” with today’s date selected. But if the
context doesn’t need a default date, put the picker on blank.
When to use
• Asking users for date input.
• Date range picker: when asking the user for a range of dates with
the beginning and end dates.