Very original. Good work

Very nice,

I personally have trouble with UI elements that move around. An option to have the minutes and am/pm statically positioned (perhaps broader to match width with the 12 hours) would make selection a very fast mouse swoop rather than 3 separate movements.

Still, far better than anything else I've yet seen.

How about 2 vertical sliders that pop-up over hours and minutes? (used in a click'n'drag fashion)

Oh, and don't forget to integrate it with HTML5 input type=time (has implementation in Opera)

Love it. Hope you get it fully finished so I can use it some time in the future.

@Sea Man

I'm sorry I might not expressed myself correctly, maybe sucks was a bit harsh after all. But I like to shock sometimes and so far it worked well for me.

Furthermore, if you carefully read my sentence you'll notice that I'm talking about usability. Not the programmer's aptitudes or the quality of their work.

I don't say that others who tackled the problem before me where idiots or incompetent, actually most of them made a really good job.

Most of them are probably even better programmers than me, still they just reinvented the wheel in many ways without exploring much the usability side of the problem.

Props on the working demo! I'll keep an eye on this, and use it in my UI's for sure. :]

This is really awesome!

Very nice from user experience perspective, two thumbs up!

About time! This is awesome, I've been wanting something like this for a while, except I have crap jQuery capabilities. Great work.

Very nice. Get it working in IE and you've sold me!

Nice approach, looks very promising :D

Would love to see a date picker version.

It would be nice to integrate it with DateJS (as an option - so if DateJS is present it will take advantage of it, if not it will use more basic UI): http://www.datejs.com/

With DateJS around you can easily parse human language dates and times - things like "tomorrow at 6pm" etc.

Needs keyboard control - but that's then going to make editing text in the box rather hard. Maybe initially display the current time in the pop-up and require user to press down arrow to move in to the pop-up keyboard control (gives focus to the hour currently entered in text box, etc). While keyboard control is with hour, typing a number key will change the hour in the text box, pressing up arrow will return control to text box, etc.

Ability to use mousewheel over the time (both in text box and the pop-up) to increment/decrement the hour, minute or second would be neat.

It would be neat if it was uber-accessible like this:

http://www.filamentgroup.com/lab/progressive_enhancement_convert_select_box_to_accessible_jquery_ui_slider/

If the text box loses focus the picker should disappear.

Should the picker appear immediately upon focus of the text box like it does now? One problem with that is it could hide form elements below the time text box - eg. if I'm tabbing through a form, I don't want the picker to hide the input I'm about to tab in to.

It would be nice to mix with hoverIntent (again, progressively enhance if available) so that if I hover over the text field for a moment the picker is shown.

Agree with earlier comments about the x-axis animation of the minute and am/pm blocks - should be much more immediate, ideally snapping to the new position straight away rather than sliding in to the new position.

And no, I have no idea how to code any of the things mentioned above :)

The implementation is fast and intuitive. It doesn't work well if you need to allow any time (i.e. 6:43pm,) but that's probably not necessary for most applications (but often is a requirement for me.)

One thing I would like to see changed is the am/pm box line up with the minutes selection. The "am" should appear right beneath the "30" minute box if you highlight that option--this way you always move the mouse in a consistent and expected manor. You already do this for the hours/minutes, so it makes since to carry over to the minutes/time period.

good one! at first I thought that it would be sorta like an analog clock or something :P

Uhhhh...I released something similar to this over a year ago: http://www.oakcitygraphics.com/jquery/clockpick/trunk/ClockPick.cfm

Yours has much nicer look and feel though, nice job.

This is great. I would love something similar for calendars... I'll be checking up on this blog often :)

Very nice, although you may want to consider that there is no such time (strictly speaking) as 12:00am or 12:00pm. Some discussion here: http://en.wikipedia.org/wiki/Midnight

Works great on FF3 and Safari/Chrome but has problems on IE6-7 and Opera (line 94, char 13: The object does not accept this property or method). I'm trying the demo page. It would be REALLY GREAT if I could use this time picker, but most of my users use IE :(

fix for IE

after line self.current = { hour: 1, minute: 0, second: 0, amPm: 'am' };

Insert // GGHI - fix IE indexOf if (!self.types.indexOf) { self.types.indexOf = function(obj) { for (var i = 0; i < this.length; i++) { if (this[i] == obj) { return i; } } return -1; } }

Modify for // GGHI - fix IE indexOf for (var i = 0; i < self.types.length; i++) { var type = self.types[i]; self.ui[type] = $($.format('

', type)) .mousemove(function(e) { self.events.mousemove.apply(this, [e, self]); }) .appendTo(self.ui.wrapper); self.ui.wrapper.append(self.ui.clear()); self.populateList(type); }

Modify for in

populateList: function(type) {
    var self = this;
    var range = self.getRange(type);

    // GGHI - fix IE indexOf
    for (var i = 0; i < range.length; i++) {
        $($.format('<li class="ui-timepickr-{0:s}-btn">', type))
        .mouseover(function(e) { self.events.mouseover.apply(this, [e, self]); })
        .click(function(e) { self.select(); })
        .appendTo(self.ui[type])
        .text($.format(self.options.formats[type] || '', range[i]));
    }
},

Modify for in

propagate: function(func, args) {
    var self = this;
    // GGHI - fix IE indexOf
    for (var i = 0; i < self.types.length; i++) {
        var type = self.types[i];
        func.apply(self.ui[type], args || []);
    }
},

For all code send mail

There is no need of position:relative, the problem is that the vertical position of the div is wrong on IE, if you specify a vertical position = input.top + input.height, it should work, but on other browsers may appear too low

On IE 6 still works fine, but it reports some errors, but, again, works fine.

Also, you have to separate the CSS of the plugin from the CSS of the demo page.

What about a more compact layout, or a vertical layout? On my page, the inputs are at the right side, near the border, so currently I can't use it!

Great work! Can't wait to use it!

@Lucas Goodwin

Nice, I'm glad you like it. The code base has already changed a lot and will probably change again, I plan I'll try to make an official release as soon as possible.

Until then you can play with the latest version from the repository (pretty unstable yet..)

http://code.google.com/p/jquery-utils/source/browse/#svn/trunk

If you have any fixes or patches, send them to me, I'll be glad to merge them in the trunk.

I think is a very good plugin and I'd like to know where I can to download the js files

Thanks and regards!!

Hi! While selecting the timepicker from textbox the timepicker.js related calendar is displayed. While selection in a jsp I haqve got two more below fields visible to timepicker.js calendar. Please send the hidden of the above said ones..

@Amit:

Thanks for taking the time to find that fix and not just complain that it's "broken".

However, next time you might want to use Google Issues tracker, I will get notified a lot faster.

That said I think you just resolved a reported issue ;)

Thanks a lot for your precious contribution.

Edit: I just verified, you actually made it works with IE6 too ahah.

Very impressive! Thanks for the time put into this and for sharing it with the community.