Whether you’re entering your birthdate, searching for events, or booking travel, a date picker is a common design pattern used on many different types of websites and applications. This design pattern should allow users to easily select a specific date or date range.

As we design a date input field, we should consider questions like:

  • Will it be easier for users to select dates from a calendar, to input dates through a text field, or a hybrid approach?
  • Do users need to select a single date, such as for appointment scheduling, or a range of dates, such as for vacation planning?
  • Should there be a default value? For example, should the date default to today’s date?
  • Are there any shortcuts that should be included (per the seventh usability heuristic coined by Jakob Nielsen, “Flexibility and Efficiency of Use”)? For example, should users be able to jump to the next month or year? Should users be able to manually enter a date even when a calendar is available?

We can reference some existing design pattern listings, such as the Calendar Picker on ui-patterns.com, Date Picker on UI Guideline, and Date Input on uipatterns.io (which focuses on mobile applications).


Imagine we already know the following about the users for our flight booking flow:

  • Some users prefer to manually input a date, while others prefer to see a calendar.
  • Users like to be able to see weekdays when booking travel.
  • Most users book their air travel at least a week out, and within the next year.
  • For our particular user base, most users are booking for specific dates, though some outliers have more flexibility.

Which of the designs on the right would you choose for our user and why? Is there anything you would do to modify that pattern?

Check Answer
We would likely choose Option B for our use case: this design pattern allows users to either manually enter a date using a text field, or to select a date from a calendar which allows them to see which day of the week a date falls on.

We would likely need to modify the basic design pattern to allow users to decide whether they need to pick a single date for one-way travel or a date range for a round trip, and to add options for users who have date flexibility.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?