Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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
share|improve this question

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

share|improve this answer
    
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. –  Roger Attrill Feb 27 '12 at 12:40
    
Interesting, thanks. Not sure if I like that or not, but definitely a food for thought... Any more examples? –  Alexander Gladysh Feb 27 '12 at 14:27
    
@AlexanderGladysh - these were in the first couple that came up when I searched for "jquery timepicker" :) –  ChrisF Feb 27 '12 at 14:34
    
Ah. Good idea, that. I should probably try it myself then. :-) –  Alexander Gladysh Feb 27 '12 at 16:24

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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