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

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?

This question and answers originated from www.stackoverflow.com
Question by (8/24/2008 11:39:46 PM)

Answer

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

Answer by
Find More Answers
Related Topics  time  input-devices
Related Questions