Date Picker Component

Date pickers let users choose a certain date or range of dates from a calendar view.

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.

Code