What is the most efficient way to populate a time (or time range)?

Question

While plenty of solutions exist for entering dates (such as calendars, drop-down menus, etc.), it doesn't seem like there are too many "standard" ways to ask for a time (or time range).

I've personally tried drop-down menus for the hour, minute, and second fields (and sometimes an "AM/PM" field, as well). I've also tried several clock-like input devices, most of which are too hard to use for the typical end-user. I've even tried "pop-out" time selection menus (which allow you to, for example, hover over the hour "10" to receive a submenu that contains ":00",":15",":30", and ":45") -- but none of these methods seem natural.

So far, the best (and most universal) method I have found is just using simple text fields and forcing a user to manually populate the hour, minute, and second. Alternatively, I've had good experiences creating something similar to Outlook's "Day View" which allows you to drag and drop an event to set the start and end times.

Is there a "best way" to ask for this information? Is anybody using some type of time input widget that's really intuitive and easy to use? Or is there at least a way that's more efficient than using plain text boxes?

Answer 1

There is quite a useful time entry tool for JQuery. It provides a 'spinner' type approach, in addition to a standard text field. It also supports the use of the mouse scroll-wheel for adjustment (as well as the traditional 'just type it in' approach) and can be configured to restrict to n-minute steps too if you like. It's pretty customisable, supports localisation and a variety of other settings, I've used it successfully in a couple of projects/demo sites.

Answer 2

I am a huge fan of plain language input (there was a topic on it the other day). I like the way 37signals backpack calendar let's you type things in (08/12 3pm Meeting with tom). I also like the way they handle times with their reminder system (they give you options like later today, tomorrow morning).

Answer 3

I find Google Calendar's approach to be the best. Use a text box, but use JavaScript to make it sort of a drop-down for picking your time. A good demo can be found for a jQuery implementation here

http://labs.perifer.se/timedatepicker/

I haven't implemented this on my site yet so I'm not 100% sure, but I think you also need code from this jQuery plugin here:
http://www.texotela.co.uk/code/jquery/timepicker/

UPDATE
The first link I posted does not require the second link's code. It is simply based off of it. To get the actual JavaScript file from the example, you can view the source of the page to find where the file is, or you can go to the URL directly
http://labs.perifer.se/timedatepicker/jquery.timePicker.js