Over a million developers have joined DZone.

Choosing a date time picker UI – jQuery

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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-in datepicker 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:

datetime picker ui - jquery

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:

date time picker - improved ui - jQuery

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?


From http://veerasundar.com/blog/2011/06/choosing-a-date-time-picker-ui-jquery/

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}