Best GUI control(s) to describe a time range

Question

I need to let end users specify a time range, to be stored and used internally as a starting date/time and ending date/time. The range could be minutes or it could be days.

Answer 1

I tend to look at common design patterns for inspiration when I'm pondering problems such as this.

The Yahoo Pattern Library offers some potential solutions.

The UI Patterns site also give some suggestions, and is worth a browse.

For good measure, here's another solution at the Welie pattern library.

Another source of inspiration might be other sites and applications. For example, think of all the use-cases where recording short and long time time durations is required. As an example, company TimeSheet recording, company car mileage log software, task recording software, stopwatch applications, calendaring apps, etc. Then see how they've handled the GUI controls for capturing time ranges.

I haven't personally found a favourite solution for picking date and time. But, I think I'd want something like this.

• User clicks to show calendar popup
• Popup shows 2 side-by-side calendars (start date/time and end date/time)
• Calendar 1 shows todays date, and the other also shows todays date.
• Calendar controls allow usual navigation and selection of day month year.
• Below each calendar is a hh:mm box, which defaults to the current time.
• User can edit value in this time box using up/down arrows or by typing.
• Alternatively, show an analogue clock below each calendar. It takes 2 mouse clicks to set time( click 1 for hour and click 2 for minutes).

Hope this helps

Answer 2

One way I've seen work very well is using a gantt chart:
http://en.wikipedia.org/wiki/Gantt_chart

You can create a single line chart and then you can scale it across months, days, hours and minutes depending on how wide or zoomed in you make the control. The problem is I don't know of any control out there right now that does just one line, so you may need to create a custom one. You could possibly look for a gantt chart control and just do one task/item.

Answer 3

Unless there is a more advanced time control in your GUI toolkit of choice, two calendar controls representing start and end is the most straightforward. Also, you need to decide how you want to use the information. For example, if you used a start date and an interval to increment that date, changing the start date wouldn't change the meaning of the interval. It really depends on what you're wanting to do.

Answer 4

There is no single answer, it depends on the context. For many places good text controls are enough. Of course such things can still help by supporting pasting and some increase/decrease actions. Maybe it can even do some validation for the value.

Then there are places that need something more. Calendar can be really helpful for entering dates and some kind of slider could be used for time. (Lotus Notes calendar has a slider.)

My advise is:

Think what you need. Don't put complicated widgets to a less used dialog.

If you need these nice helpful widgets, check if there are ready made in the library you are using and take some time to see how others have done these.

Always have the text controls with support for pasting.

Answer 5

Check out the VisualHint date control. It can be configured a multitude of ways including a timespan. This would allow you to use one control instance to show the start time and another to set the timespan until the period is complete. The control also supports an extensible base framework so you could possibly combine both start/end or start/span into a single control.

Answer 6

Observe what people are doing with your time range control. Then write it so that it's most suited towards doing what the people want to achieve with it. For instance, leave away past dates if inputting future dates only makes sense.

Jonathan Leighton has made a nice date inputter -element in jquery that I've found very nice for inputting dates. This is beneficial in a way that user can both input the date by clicking or type it in directly. The user also directly gets the hint about typing it into the box. If you couple this with some kind of timeline -object, you may actually go far afar. Just avoid making UI elements that are confusing or angering!