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