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