Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

enter image description here

share|improve this question
    
Are the times full ranged, or are there only limited values which are acceptable? That is, are there 24 values on the Hour menu and 60 values on the Minute menu? Or are the times limited to (say) 15 minute increments between 7:15am and 5:45pm? –  Erics Jan 7 '12 at 10:06
    
Its mostly for business hours, so like 7am - 7pm. But I want to be able to say if you are off this week, you'll be returning on X date. –  Kyle Rogers Jan 7 '12 at 14:46
add comment

5 Answers

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:

enter image description here

Zipcar:

enter image description here

share|improve this answer
add comment

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:

Datepicker Timepicker

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:

Round Timepicker

share|improve this answer
add comment

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):

Time selection

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:

enter image description here

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

share|improve this answer
    
I really like this approach, but I am wondering if somebody has already this approach on the web. If I don't find something useful, I might try writing a jQuery plugin. –  Jai Pandya Jan 23 '13 at 6:58
add comment

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.

share|improve this answer
add comment

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

jQuery time picker plugin

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

share|improve this answer
    
This is the first time I've seen datejs. Very interesting. The first plugin you mention though only seems to accomodate time, not the date. –  Kyle Rogers Jan 7 '12 at 14:49
    
+1 for that time selection plugin –  ripu1581 Jan 17 '13 at 13:45
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.