Timepicker for jQuery inspired by Google Calendar

http://jonthornton.github.com/jquery-timepicker/

by heyjonboy • 15 years ago

123 18 15 years ago

jonthornton.github.com

Osiris• 15 years ago

I like the very clean design. I get annoyed with some of the flashy plugins that have tons of options, get really complicated, and are 10's of KB in size. This one is simple and clean. Well done.

One a site note... for the duration example, is it possible to make columns to line up the time and duration in columns rather than just with spaces? I have some auto-suggest code where I'd like to make two columns that are aligned rather than just with spaces.

heyjonboy2• 15 years ago

Yup, the time inputs just need a common parent element for the datepair example, and it doesn't have to be the direct parent. You could use a table or do something with floats.

jbail• 15 years ago

I'm sure its nice on a desktop, but it's unusable on a phone. It's probably not your intended audience, so good effort nonetheless.

I think in the not-to-distant-future, especially as mobile browsing overtakes desktop browsing, its going to be a prerequisite that plugins/widgets work on both screens. As people evaluate whether or not to use a plugin, this will quickly become a deciding factor.

Again, not a critique of this plugin. Just a thought I had while looking at this and being kind of sad that I couldn't really experience the demos on my phone.

fletchowns• 15 years ago

Seems to work fine on my iPhone?

johnbender• 15 years ago

I hate to harp on you here because you're clearly just attempting to help, but I think the statement

> Seems to work fine on [the] iPhone?

is representative of the main issue with the mobile web. Most people only build with iOS and maybe Android in mind.

Thankfully Android's browser is bad enough that it's raised awareness of how difficult it is to build complex cross platform web applications.

hrabago• 15 years ago

On my iPhone, it doesn't work as well. Yes, the dropdown selections show up, but the keyboard pops up as well, and on top of the selections, so unless you know that the selections are there, you won't even notice them.

heyjonboy2• 15 years ago

Very true, mobile wasn't really taken into consideration with this plugin.

One option would be to use a <select> dropdown as the element you attach $.timepicker() to, and only initialize the timepicker for certain screen sizes. Other screens would see the default <select> element, which works better on mobile devices.

jedmund• 15 years ago

This is exactly what I needed for a side-project I'm working on for my mom. Thanks!

sleepyhead• 15 years ago

Very similar to this: http://labs.perifer.se/timedatepicker/

13rules• 15 years ago

Love this! I have a calendar text field / dropdown that I built in YUI that works similarly ... this is a perfect addition to that instead of the dropdown I am using now for the time field.

robinwarren• 15 years ago

Very nice. One suggestion, it'd be nice if the selection/options updated as you typed. ie typing 06 scrolled to show 06:00, 06:15 etc. or filtered the possible options to only show those matching /06/.

joelhaasnoot• 15 years ago

My app uses a lot of these: I generally hand generate them however due to the range always changing.

From an astetics standpoint, when I have two times I personally like a slider with two handles. in GCal I'm always dragging my apointments longer and shorter in the overview, not in the details. My "solution" is to use two select boxes with the times, and then use this plugin to convert it to a slider: http://www.filamentgroup.com/lab/update_jquery_ui_slider_fro...

moondowner• 15 years ago

I've been using it on several occasions, it's a tiny JS and CSS file and it's pretty simple for configuration too.

swah• 15 years ago

I got a very simple scrollbar hourpicker, I can't remember seeing something similar on Google Calendar..

coreymaass• 15 years ago

I like it, but similar to others, it doesn't limit the input to the selections. From a UE standpoint, I found it a problem that I could type in abcd, and that's not a valid time.

ricardobeat• 15 years ago

I don't see the difference between this and a <select> element, except that the latter looks much better and works cross-platform. It doesn't offer any new functionality like auto-complete or validation. Am I missing something?

taitems• 15 years ago

How are you going to float a value to the right inside of a native select value? How are you also going to style the value separately (font-weight, color etc)? All that is really available is optgroups vs. options.

Timepicker for jQuery inspired by Google Calendar

Related Stories