Introduction
Date pickers provide users with the ability to select a single date or a range of dates. The choice between using an input or calendar flyout depends on the type of date you are requesting from the user.
Types
- Date Input by Keyboard: This options should be used for dates users remember easily or use a different format than dd.mm.yyyy. Use for credit card dates, birthdays, etc.
- Date input with calendar flyout: Flyout are used for dates close to the present times scheduling dates where the system shows availability. You can use it for delivery dates or date ranges for bookings.
Usage
Use the date picker flyout for scheduling dates, e.g. delivery, bookings, etc. Provide this option where the user relies on system-provided dates that show availability.
Don't employ a date picker flyout for dates in the past or those that are remembered by the user easily e.g. birthdays. Don't make users scroll or take any extra steps.
Use a text input field for dates, such as birthdays, that can be easily typed in by the user and they don't need to rely on a calendar to anticipate the date.
Don't give users the option to input dates that are dependent on system availability.
Dates formats that differ from the standard dd.mm.yyyy, should always use a date input, e.g. for credit card expiration dates.
Don't use calendar flyouts for dates that differ from the standard dd.mm.yyyy format where either not the full date is required or a different format is necessary.
Mobile Specs
On mobile, use OS provided calendar flyouts instead of MDX flyouts.
Also known as
Calendar