If you ever booked a hotel online, you surely came across datepickers to help you choose the start and end dates for your trip.

A calendar in a booking app is necessary as users need to pick a specific range in order to make a reservation. This is when the datepicker plays its key role in the app. It allows users to navigate through the days, weeks and year to choose the period they desire.

So if you’re tasked with building an app with booking functionality or you are looking to improve on an existing implementation or you simply have some rooms to let and were thinking about boosting your business with creating an app for it, we suggest you to keep reading.

A couple of things to look out for

While the standard elements are mostly simple to design, more complex items like the calendar requires much more attention.

As a starting point, the calendar in a booking app should always be able to answer the following three questions:

In other words, the date picker for booking a room:

How top booking companies use date pickers in their apps

Now let’s walk through a couple of well-known booking apps to see how they solve their from & to picking requirements.
I have looked at how the product teams from top booking companies like Booking.com, Airbnb and others made it nice and easy for their users to pick a period for their stay.

Airbnb

We love Airbnb and everything that it stands for. Let’s take a look at how an app with more than 5 million users solves date picking.

They are using a calendar with vertical scrolling. The months are laid out in a continuous format each separated by a clean line and with the short name displayed on the first day of the month – JUN, JUL, AUG…

Once the user has selected the arrival by tapping on the desired day, the calendar will automatically toggle to departure and enable selection. The selected period will be highlighted with a different color. The selection includes the short name, day, month and year – Wed, 30 Dec 2015.
The format is easy to follow, we usually know how to use a calendar when we see it. One small nitpick is that the year will only be revealed after the selection has been made, so it’s not really obvious what the year is.

Booking.com

Not surprisingly, for one the world’s biggest online booking service, picking the right dates is important. The date picker needs to prevent users from selecting invalid dates as rooms can only be booked for a maximum of 30 days at a time. Also the booking must start within the next 365 days. And to make it foolproof the calendar adjusts itself so that the departure date can’t be earlier than the arrival date.

The calendar shows up in a modal window. While the check-in and check-out date needs to be selected in two different views, the flow of selection is pretty straightforward. The moment you select a date and it’s valid, it is automatically submitted and by clicking the appropriate box for check-in/out the dates can be adjusted. Even if the two dates can’t be selected from the same view, it would be nice to see the highlighted range.

I like that this picker supports date validation and culture awareness and is definitely consistent with the apps look and feel.
One small issue is that a quick year picker is missing. When I wanted to make a reservation for spring next year I had to tap the next month arrow nine times to get to April 2016.

TripAdvisor

The first thing you notice on TripAdvisor’s date picker is the multi-month calendar with vertical navigation. The current day is highlighted in orange, which helps when looking for dates relative to it. The selected period is visible and highlighted in the same view, making it easy to follow and understand. The highlight is obvious and both start and end dates are represented with two arrows, marking the two ends. This is a pretty solid implementation, which lets the users explore at their own pace but doesn’t let them derail.

Agoda

Now let’s look at something different. Agoda chose to go with a scroller instead of the calendar. I think the calendar is the way to go in such a situation, however the app does it a little differently. You choose an arrival time and then adjust your stay with a ticker, which is located just below it and is labeled Nights. Everything else is pretty straight forward.

More and more users are using their mobile devices vs their laptops to plan trips and vacation. It is more important than ever to give them the right tools to do it and reduce friction. If you plan to roll your own calendar or use an existing control keep in mind that usability, a clear visual design, consistency with the target platforms and user locale are very important.