I had a requirement to add an input control for users to select date time range. User will be selecting two values – start time and end time. For both the values, the date is same. Only the time differs. For example, the values could be 6/19/2011 10:30 to 6/19/2011 11:30.

I am using jQuery UI library for my web-app. So, I started searching for a date time picker widget with an option to choose a time range. The built-indatepicker does not have the ability to choose a time. But thanks to Trent, there's a plug-in I found to add timepicker to jQuery datepicker. With that, I came up with the design which initially looked like this:

The control functioned as I expected. I deployed the app with this UI and tried it for a week to find out if there's an usability issue. And, yes! There was some difficulties I found while using this date time picker.

1. It was too many clicks – one to choose a date, one to choose a hour and one to choose the minutes. Additionally, there's a second input date too for which I had to repeat these clicks again – so a total of six clicks just to enter two input values. Not good!
2. On the time picker slider, the hour and minute slides are disconnected. Means, you need to separately choose these two. I found this a lot more confusing. Also, while in a hurry, this confusion will lead to dissatisfaction with my application. Again, not good.

So, I decided to come up with some other way to enter the start time and end time. After googling a while and self brainstorming, I decided to go with a single date control and single time control. Hence, my current UI looks like this:

Now it is a lot more simplified – just a textbox and a slider. And, the number of clicks user has to make is just three (compare it with the six of previous approach). It looks more elegant and fit too on my form.

So, now a question to you – which datetime picker UI would you prefer?First one or the second one?