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

  • 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
    Commented Jan 7, 2012 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
    Commented Jan 7, 2012 at 14:46

5 Answers 5


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: https://stackoverflow.com/questions/1245245/jquery-date-time-picker and https://stackoverflow.com/questions/476822/jquery-time-picker

  • 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
    Commented Jan 7, 2012 at 14:49

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.

  • 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
    Commented Jan 23, 2013 at 6:58

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


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


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


enter image description here


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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