Date picker

A control for choosing a date, or a range of dates, from a visual calendar.

Also called: date picker, datepicker, calendar, pick a date, choose a date, date, date of birth, birthday, date range, from to, booking dates, check-in

What it is for

It rules out format errors when typing dates, such as mixing up MM/DD and DD/MM, and it is easier to read: you can see the days of the week and the weekends. It often blocks dates that aren’t available.

Where you see it

• Travel services — choosing check-in and check-out dates, or flight dates
• Healthcare — picking a free appointment slot
• Analytics — setting the period for a report

What it is called in code

• <input type="date">
• DatePicker
• Calendar

See also

• Text input — A field where a person types something in: letters, numbers, symbols.
• Dropdown list — A field that opens a list when you click it, so you can pick one or several options.
• Stepper — A progress indicator that breaks a long process, like filling in a long form, into a sequence of steps.