Overview

Date picker

Date pickers allow the selection of a date or a month, including past, present, and future dates.

Date picker

Usage

When to use
Date pickers allow users to choose a date by selecting from a calendar dropdown or typing the date into an input field. They can be used with other fields in a form, or used as a standalone. Use an input mask to indicate the date format.
Simple date input
Use when users don't need a calendar to recall or identify the date, and can key in the date directly and efficiently, such as birthdays. You can use it for entering a specific date (DD/MM/YYYY) or a specific month (MM/YYYY).
Calendar picker
Use when users need to refer to the recent dates on a calendar in order to make a specific date selection. It allows both direct fill-in and selection from the calendar dropdown. You can use it for selecting a specific date (DD/MM/YYYY) or a specific month (MM/YYYY).
How best to use
Do
Use a calendar picker for date selections that are more recent. If users need to enter a date that's far into the past or future, set the default date to a more convenient date, or use the simple date input instead.
Don't
Don't require users to enter special characters when entering dates, such as - or /.
Do
Disable illogical date options. For example, don't allow birthdays to fall in the future, or upcoming appointment dates to fall in the past.
When not to use
Don't use when you have a few date options for users to choose from
Use a dropdown or radio if you're providing a short list of date options for users to select from.