Date-and-time control for time-series filter

Question

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]

Data:

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

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:

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: