Unified Date Pickers for Easier Date Selection

by on 10/23/13 at 10:18 am

Booking airline tickets is one of the most common online tasks. Every time users book a flight they have to use the date picker widget to pick a leave and return date. The way date pickers work today can make selecting dates slow and confusing for users.

Users have to pick their leave and return date in separate fields. This makes the fields feel less together, which can cause users to mix up their dates. It also auto-fills in the return date field with the leave date they pick further confusing them. The bi-monthly calendar closes after they pick their leave date and opens again when users click the return field. This forces users to have to process their dates over again.

Unifying the Date Picker

The traditional date pick is slow and confusing for users. A more efficient approach is to unify the date fields into one calendar. The bi-monthly calendar appears once the user picks a leave date and stays opened until the user picks their return date. This allows users to pick their dates faster without losing view of the calendar. It takes them less clicks to complete the task and makes the date fields feel more together.

Kayak’s flight form uses a unified date picker. One field holds two buttons that allow users to pick a leave and return date from a single calendar. The user only needs to click the field once to pick both leave and return dates. The calendar shows the number of days between the leave and return dates as the user hovers their cursor over each day. After the user picks their dates, the field displays the day and date in abbreviated name format. This makes it clear to users the dates they picked.

Traditional date pickers are not as easy to use as a unified one. It not only makes picking dates faster, but it displays the dates to the user clearer. If this approach can make booking airline tickets easier, it’s time for more sites to adopt it.


Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns


Elegant Themes Shopify

Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.

3 Responses to “Unified Date Pickers for Easier Date Selection”

  1. Sean

    Oct 23rd, 2013

    Check Skyscanner iOS calendar :)

  2. Lee

    Oct 24th, 2013

    Can you suggest how you would make this improved calendaring accessible? It’s an interesting idea for sighted people, but what about blind or keyboard-only users?

  3. Ben

    Oct 25th, 2013

    Love the idea, but could use some help with implementation. Is there a tutorial out there covering this?

Leave a Comment