Slider-less time selection.

Question

I'm using the default datetime picker with rails. I'm mainly focusing on the time aspect of this because for my purposes the day will rarely ever be changed. I'm looking for some sort of way to make selecting a time a little more elegant. I'd like to avoid sliders if possible. Any suggestions would be great.

Answer 1

If you are specifically interested in a time picker, Maxime Haineault's implementation looks good. It minimizes the time selection procedure to single click.

Though I personally feel a lot comfortable if I can type the value directly. Keeping this in mind, there is an interesting datejs project which quite comfortably accepts natural input.

You can also follow these SO discussions on this topic: http://stackoverflow.com/questions/1245245/jquery-date-time-picker and http://stackoverflow.com/questions/476822/jquery-time-picker

Answer 2

I rather like the approach taken by the Calendars app (available on iOS). By default, it shows this view (focus on the bottom parts of the screenshots):

It does not allow for single minute precision. However, for a lot of applications, I'd imagine that being acceptable. I rather like the division of the time that was chosen. Rather than AM/PM ranges, the upper bar contains the day-time hours, and the lower bar contains the night-time hours. The only weird result of this, is the placement of the 0:00 to 07:00. It right after the 20:00 to 23:00 range, but it represents the time before it. I guess a three-bar variation (with empty parts in them) would be clearer, but not as visually appealing.

On clicking the Date button (or on the All-day button), the view changes to this:

This is of course all in an iOS app, not a website. But you might use a similar approach online, I think.

Answer 3

I've went across the same need today and found the KendoUI's DateTimePicker widget which brings some good inspiration.

It combines a date-picker and a time-picker in the same field: they are accessible through icons, and the date-picker is shown above the field while the time-picker is displayed below it.

The date- and time-picker parts look like this:

EDIT:

Continuing my research on the subject I've found other possible approach like the WPF DateTimePicker from Telerik and the Mobiscroll javascript library (especially the timepicker inspired by the Windows Phone UI).

One of the most innovative approach is this proposition from Dave Cortright:

Answer 4

I would suggest a combination of the usual dropdown calendar and allowing users to type in the time themselves, with a fallback on dropdowns for mobile devices if you need to accomodate those. There are plenty of dropdown calendars out there, like the jQuery UI Datepicker, that you can drop right in. Good ones are nice and friendly, and also degrade gracefully.

As for the time, of course, just one simple textbox would do, I think. A fancier alternative would be to have a combined box, here's a quick example.

Answer 5

Lots of interesting and novel answers here, but I think you can solve your problem with something simpler.

Some well-known services use a combination text-input/drop-down for the time--and a similar text-input/calendar-picker for the date.

This allows people to either pick from a list of options (quick for mouse users, low precision) or to type an exact value (higher precision, quicker for keyboard users).

Most importantly, your users will probably be familiar with this pattern :) Remember, don't make them think!

Google calendar:

Zipcar: