Users of our (non-mobile i.e. mouse UI) web-app do a lot of queries on various lists of time-series values. Part of each query is "from" and "to" timestamps, limiting the range of values for a query to operate upon. Any of these limits may be omitted.

Usually, when filtering by timestamp, users are interested in dates (i.e. no finer than days); but, sometimes — relatively often, actually, they want to set specific hour, minutes, even seconds.

Now we use html date picker control for date alongside with three numeric inputs for time — which is rather ugly. Is there some more elegant solution? Any references I can look at for inspiration? Assume that we're willing to code anything that is sanely doable in JS — as long as it is worth the gain in usability.

Here is a naïve synthetic query example to illustrate the problem (note: not exactly the actual UI):

Calculate a sum of counters over time:

  • From: ( ) Beginning | ( ) [Date] [Hours][Minutes][Seconds]
  • To: ( ) End | ( ) [Date] [Hours][Minutes][Seconds]
  • Counter: ( ) Any | ( ) [Greater than] [Numeric input]


'2012.02.27 10:00:00', 10
'2012.02.27 10:00:01', 15
'2012.02.27 12:07:21', 0

1 Answer 1


You might want to look for "timepicker".

There's an example here that combines a time picker and date picker in the same control:

example time picker

Here when you click on the text box the picker is displayed and the time is controlled by the sliders at the bottom of the popup.

This page has a more interactive picker where the hours and minutes are displayed as you roll over the elements:

another example time picker

  • I'm a big fan of connecting related picks into a single-action - I think timepickr is a great option and I like the way it switches for 12/24hr input. Nice. Feb 27, 2012 at 12:40
  • Interesting, thanks. Not sure if I like that or not, but definitely a food for thought... Any more examples? Feb 27, 2012 at 14:27
  • @AlexanderGladysh - these were in the first couple that came up when I searched for "jquery timepicker" :)
    – ChrisF
    Feb 27, 2012 at 14:34
  • Ah. Good idea, that. I should probably try it myself then. :-) Feb 27, 2012 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.