Notice This is a beta feature offered by Google. Also this is automatic translation, which means the results are often inacurate and/or hilarious. Enjoy.

ARCHIVES /  RSS
Blog

jquery.timepickr: first official release

h3  ~  10 Nov 2008, 22:00  –  9 comments

I've just put online the jquery.timepickr web page for the first official release, 0.6a:

http://haineault.com/media/jquery/ui-timepickr/page/

Sorry for the long URL, I'm moving my domain hosting soon, I'll make it shorter.

It has 24h format support, it was probably the most requested feature. I had to keep the am/pm selection, even if officially there is no such thing in the 24h convention. It's the cleanest and most intuitive way I've found to work around this problem while keeping the time picker usable. Of course the labels are configurable.

I hope you'll like it!

Update: What a nice surprise this morning, the man himself blogs about my plugin !

post a comment Comments

Man, that is really cool. Something like that could be adapted for date picking too I presume. Would be handy.

Dougal Matthews ~ November 11, 2008 at 10:19 a.m.

@Dougal Matthews:

Yeah, I know.. but this style of UI design does not play well with larger dataset. I had hard time to make the 24h mode as slick as the 12h mode.

h3 ~ November 11, 2008 at 11:26 a.m.

Nice! This control feels much like a variant on drop-down selection. I could see this concept being applied in other ways, too. Love it.

Could I be so arrogant as to make one small suggestion? I think that when in "edit" mode a click on anything that's not a button (including the text field) should cancel rather than accept, i.e. revert to the previous value.

(FWIW, the clickability of the buttons wasn't immediately apparent to me. I'm sure that's not the case for everyone, YMMV.)

Very creative. Good stuff.

Neil Mix ~ November 11, 2008 at 12:54 p.m.

@Neil Mix:

Thanks for the suggestion, it would indeed make sense to reset the input. You can expect this behavior to be implemented in further releases.

Thanks for the feedback !

h3 ~ November 11, 2008 at 2:22 p.m.

Nice work, but even the 24 hour version won't work for most european countries, which have no concept of "am" or "pm" at all - there's just 0..23 hours.

hns ~ November 11, 2008 at 4:05 p.m.

You should really remove the am/pm selection step for the 24h format, it doesn't make sense at all.

Anyway, very nice plugin, thanks for this :)

NiKo ~ November 12, 2008 at 3:06 a.m.

Supper plugin! A lot of thought and very usable and well written right out of the gate. Its a great addition to the new UI Datepicker and I intend to put it to use along side it for an App I'm working on.

One issue with both is usability with some PDA's (read iPhone). The iPhone pops up the keyboard as soon as you've got focus. One way to degrade for this is to look for it and provide an intuitive text editing solution (a la phone number handling in OS X Address Book).

Two other nice additions:

  1. Landscape/Vertical mode: orienting the selectors can depend upon real-estate. Forgive me if this already exists.
  2. Autoscroll: autoscroll the window to keep the selector in view.

If you get enough support, a google group would be a great addition to the existing Google Code; it might encourage others to pick up on fixes and extensions.

Leo O'Donnell ~ November 13, 2008 at 7:44 a.m.

Very nice design, but I must also add it is useless as long as am/pm is present in 24h mode. Maybe you could make a division by first digit, like 0/1/2 on the first row, then 0-9 on the second row... something like that. Just a thought.

Elmer ~ November 14, 2008 at 8:44 a.m.

@Elmer

I know there is no am/pm in 24h mode and this is tripping a lot of people. Actually I think it's probably the most complained thing so far.

For me it felt natural, but this is a very personal (and regional) taste. That's why you can customize these label and write whatever you want ;)

However if someone has a better idea I will without a doubt try it.

Thanks for the feedback

h3 ~ November 14, 2008 at 1:55 p.m.
Copyrighted stuff .. u know.