Selecting dates is a vital function in the design of online travel products. If users have to struggle with inputting dates, the product's usability is severely impacted. We recently decided that the trusty date-picker widget we've been using since Cleartrip launched was in need of a complete overhaul.

We were never really thrilled with the way it looked or worked. The grey background around the months looks out of place, the colours don't really fit with the colour palette we use at Cleartrip, and the close button sticks out like a sore thumb.

The vertical stacking of the months was also problematic. In particular, placement of the "Next month" and "Previous month" links was bothersome for two reasons: 1) it requires quite a bit of mouse movement to move between the two links; 2) the "Previous month" link doesn't appear at all if you're picking a date in the current month, causing the display of the months to jump up and down.

Another important consideration while implementing a date-picker is that it should be easy to configure and easy to maintain. Our original date-picker was neither. The date-picker is probably one of the most widely used pieces of code across our various products and we needed something that could be easily reused and adapted to fit a variety of situations.

We released a new date-picker last night. To begin with, we rewrote the Javascript code for the calendar from scratch to make the date-picker easy to configure and reuse. We then started working on its appearance. First we moved to a horizontal arrangement of the months. Then, we eliminated the need to use text links by creating new icons for the previous, next and close buttons. The icons were placed at the top of the date-picker--that's where people expect them to be.

With the layout out of the way, we turned our attention to colours. We experimented with an all-white display of months and dates, but found it looked a little too flat. We made the background for dates a light shade of yellow and thought it looked just about right. As a final touch, we added a dotted border to help distinguish weekends from weekdays.

We think the new date-picker is a huge improvement over the old one. As always, this design tweak was an exercise in improving all the little things that make a big difference.