Blog
ui.timepickr.js: An experimental jQuery plugin
Recently I came to the conclusion that filling a time field in a form is relatively annoying.
I have seen a bunch of JavaScript "time" pickers, but they seem to always stick to the same approach and honestly I think most of them s*cks in term of user interaction and usability .. some more than others.
Above all I think a time picker widget should not alter the way users input data, if they want to use the field as a plain text field and enter "8:00" manually they should be able to. But there is still room for innovation, so I've determined a set of goals and tried to design my widget around it:
- It should be unobtrusive
- It should degrade gracefuly
- It should require maximum 2 clicks
- It should allow intuitive keyboard navigation
- It should be touch-friendly (think iphone, tablet pc, etc..)
Last night I hacked together all my ideas and it gave this (demo).
This project is experimental and in its very early stage, so there is probably still a handful of bugs to fix and I'm not sure I'll make an "official" plugin of it yet.. it will most likely depend on the feedbacks I get.
By the way, feedbacks and suggestions are more than welcome.
Update: Thanks everybody for the huge positive feedback, it's really great. I've just updated the demo, it should be working now on IE (thanks to Mandx and GGHI for fix). I've tested it on the following browser without problem:
- Mozilla Firefox 2 (Windows)
- Mozilla Firefox 3.0.3 (Linux)
- Mozilla Firefox 3.0.3 (Windows)
- Epiphany Web Browser 2.22.2 (Linux)
- Safari 3.1.2 (Windows)
- Microsoft Internet Explorer 6
- Microsoft Internet Explorer 7
Please take note that it's still the prototype code, it's still subject to major API changes. I've started refactoring it to make it more generic. I've also separated it in two plugins, one (dropslide) will handle the presentation side and the other (timepickr) will handle the time picking functionalities. I've received a considerable amount of request to expand the plugin's capability to allow any kind of data (other than time), but I though it didn't fit the scope of this plugin, hence the new dropslide plugin.
post a comment Comments
Very original. Good work
permalink James ~ October 7, 2008 at 5:21 p.m.
That's really cool. I haven't analyzed that precisely, but would it work with 24-hour format instead of 12 + am/pm?
permalink Aidas Bendoraitis [aka Archatas] ~ October 7, 2008 at 5:32 p.m.
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.
permalink pete ~ October 7, 2008 at 5:44 p.m.
Hey, that's beautiful. I'd like to see a similar idea applied to date picking as well.
Didn't work so great on the iPhone, works well on FF2.x .
permalink Parand Darugar ~ October 7, 2008 at 5:50 p.m.
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)
permalink kL ~ October 7, 2008 at 5:57 p.m.
I may have actually made it past the second paragraph if you didn't tastelessly bash someone elses work. That's just tacky.
permalink Sea Man ~ October 7, 2008 at 6:13 p.m.
Love it. Hope you get it fully finished so I can use it some time in the future.
permalink Michael Terry ~ October 7, 2008 at 6:27 p.m.
Extremely neat!
permalink orip ~ October 7, 2008 at 6:33 p.m.
It's buggy as hell, but I like where you're going with it. never really saw anything that used a cascade-menuing system for choosing times. I could see that thing dialed in and working well. (I'd get rid of the animation of moving around the minutes and am/pm designator -- they seem to slow.)
permalink todd ~ October 7, 2008 at 6:48 p.m.
This looks incredibly awesome! Some suggestions though:
- Try using a single level of buttons, it's easier to understand for the user. Furthermore, label the button row, e.g. "choose hour:".
- Make the buttons be controlled by the keyboard, and selected with space, enter, or the right-button.
- Always keep the text selection in sync with what buttons are being displayed, i.e. have the minute part being selected when showing the minute buttons. That way the user can choose to pick a minute count by keyboard or mouse, or simply enter it himself.
- When the user has typed the first two digits (the hour part,) insert the colon and jump to the minute selector. The same with the AM/PM part.
permalink Daniel Schierbeck ~ October 7, 2008 at 7:12 p.m.
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.
permalink h3 ~ October 7, 2008 at 8:15 p.m.
Excellent design. I really like it, will definitely keep a watch on this.
permalink Paul ~ October 7, 2008 at 8:59 p.m.
I like the picker. I have occasionally needed a time picker and wanted something similar to this. I have a few suggestions for improvements: 1) Clicking the clock icon should open the picker 2) Clicking away from the control should cancel the selection and revert to the previous value. 3) Agree with Daniel that the rows need labels ("hour:", "min:") 4) Also agree with Daniel that keyboard arrow navigation is required (left, right, up, down, enter to select, escape to cancel).
Thanks!
permalink Oliver Crow ~ October 7, 2008 at 9:03 p.m.
Props on the working demo! I'll keep an eye on this, and use it in my UI's for sure. :]
permalink Trave ~ October 7, 2008 at 9:20 p.m.
Works well in FF3, but on N800 with the latest MicroB it is unusable due to the appearance and disappearance of the virtual keyboard which is triggered by the focus/unfocus events of the input element.
permalink finite ~ October 7, 2008 at 9:20 p.m.
This is really awesome!
permalink Sahra ~ October 7, 2008 at 9:32 p.m.
Original idea! Great start!
permalink fish ~ October 7, 2008 at 9:42 p.m.
Very nice from user experience perspective, two thumbs up!
permalink Aleksey Korzun ~ October 7, 2008 at 9:44 p.m.
This is an EXCELLENT idea - you should expand it to include dates as well!
permalink Jared ~ October 7, 2008 at 10:56 p.m.
About time! This is awesome, I've been wanting something like this for a while, except I have crap jQuery capabilities. Great work.
permalink Corp ~ October 7, 2008 at 11:20 p.m.
Nice one brother
permalink Kiel Frost ~ October 7, 2008 at 11:47 p.m.
@All
Thanks for all your feedbacks, it's greatly appreciated !
Thanks for your suggestions, pretty pertinant, I will work on that
It's in my todo list (internatiolalization)
@kL
I've considered slider but I quickly found that they were not fit to do the job. Furthermore, simply using jQuery UI's slider would make more sense in this case.
permalink h3 ~ October 8, 2008 at 12:14 a.m.
Very nice. Get it working in IE and you've sold me!
permalink Darren ~ October 8, 2008 at 12:51 a.m.
Work on Opera 9.60 RC2 !
permalink Mr.MoOx ~ October 8, 2008 at 4:10 a.m.
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/prog...
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 :)
permalink Guy Fraser ~ October 8, 2008 at 5:06 a.m.
that is just f*cking beautiful!!!! Great job!!!!
permalink dfguy ~ October 8, 2008 at 8:26 a.m.
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.
permalink Dan G. Switzer, II ~ October 8, 2008 at 9:41 a.m.
I freaking love this! I have been searching for a good timepicker for a long time. While there may be improvements to be made, it's the best thing I've seen so far.
My one suggestion is the am/pm selection is a little bit hard to select if you're trying to get a time like 8:45am. Selecting "am" which is on the left, then moving over to the right to get ":45" can make it easy to accidentally select ":pm". I hope that makes sense.
I don't know a good solution, but maybe you could move am/pm up above minutes? I don't know. Good work so far!
permalink Andrew ~ October 8, 2008 at 9:43 a.m.
Excellent endeavor and start! ie6 hangs up (of course!)... I'll keep checking back. :)
permalink cb ~ October 8, 2008 at 10:02 a.m.
good one! at first I thought that it would be sorta like an analog clock or something :P
permalink andy ~ October 8, 2008 at 10:20 a.m.
Configurable granularity for the minutes would be nice... most of the time quarter hours is enough, but some people might want to be able to do it at the 5 minute level.
Also, might be cool to include time zones... but unsure how that should work.
Other than that, it's pretty damn nice.
permalink John O. ~ October 8, 2008 at 11:46 a.m.
Uhhhh...I released something similar to this over a year ago: http://www.oakcitygraphics.com/jquery...
Yours has much nicer look and feel though, nice job.
permalink Josh Nathanson ~ October 8, 2008 at 12:56 p.m.
Nice work...even though its still in experimental, its looking great so far. I want to find a project to use this on!
permalink Ryan Coughlin ~ October 8, 2008 at 2:13 p.m.
This is great. I would love something similar for calendars... I'll be checking up on this blog often :)
permalink Ivan Lazarte ~ October 8, 2008 at 3:44 p.m.
Really nice. really fast to pick an hour. I liked the fact you don't need the keyboard at all.
permalink Shir ~ October 8, 2008 at 6:15 p.m.
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
permalink Ben ~ October 10, 2008 at 7:38 a.m.
Very nice! I haven't used jQuery for much before, so it looks to be fairly capable way of adding some functionality. Maybe I'll have to abandon my scriptaculous lovin'...
A few random suggestions (which may be listed already below): - Would be nice if it vanished (leaving the last selected date) when the user clicks elsewhere. With this, be careful it doesn't disappear if they click between the squares! :) - Some highlighting or pointer change when the user hovers over the clock icon
Another thought: should the date remain the same until they actually click, or it should update progressively? I think both would be good in different situations. Might be an option?
I used it in safari, and it works great! Again, Good Work!
permalink booc0mtaco ~ October 10, 2008 at 9:55 p.m.
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 :(
permalink Mandx ~ October 19, 2008 at 11:34 p.m.
You are using Array.indexOf() to get an object's index in an array. That's the problem! Only change it to use jQuery.inArray(<value>, <array>) and it works! There is only a positioning flaw, the hours list appears over the input (but the caret and clock are still visible)
Change it soon and try to fix the placement!
permalink Mandx ~ October 20, 2008 at 1:27 a.m.
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('<ol class="ui-timepickr-{0:s}" style="display:none;" />', 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
permalink GGHI ~ October 20, 2008 at 3:51 a.m.
I have been playing with the div... If you set position:relative on the div#ui-timepickr, the picker shows correctly in IE, but the clock moves to the next line ... (and I haven't test it on FF/Safari)
permalink Mandx ~ October 20, 2008 at 8:58 a.m.
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
permalink Mandx ~ October 21, 2008 at 11:31 p.m.
@Mandx
I'm not sure to understand what you mean, but if you find a better or more efficient way to do it, feel free to contribute it. I'll commit the code and give due credits.
That said, you should check the latest version. I've separated the layout part to make a plugin I've named dropslide. Some people requested that I make my plugin more generic to allow more data types, but I preferred to keep things separated.
http://code.google.com/p/jquery-utils...
You can checkout the whole project and check demo/ui-dropslide.html for an example.
Will make an official announcement soon ;)
permalink h3 ~ October 22, 2008 at 8:01 p.m.
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!
permalink Mandx ~ October 23, 2008 at 7:15 p.m.
Ok, this is EXACTLY what I've been looking for! Very innovative input method. My current application requires the entry of lots of time data. I have been handling it with simple drop-downs (since the time is in 15 minute increments per requirements that works alright) and was going to roll a large multi-table selection method, but this is way more intuitive.
I may have to run with your code and get it into production shape (well, as much as we need anyways).
permalink Lucas Goodwin ~ October 29, 2008 at 10:18 p.m.
@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...
If you have any fixes or patches, send them to me, I'll be glad to merge them in the trunk.
permalink h3 ~ October 30, 2008 at 8:52 a.m.
Why the demo inserts a colon ":" before the am/pm? It can be changed?
permalink Mandx ~ November 6, 2008 at 8:18 p.m.
I think is a very good plugin and I'd like to know where I can to download the js files
Thanks and regards!!
permalink cesar ~ November 9, 2008 at 11:41 a.m.
@mandx & cesar:
I'm almost finished with the first official release which include documentation. You can expect it to be available for download within a week.
permalink h3 ~ November 9, 2008 at 4:42 p.m.
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..
permalink Anil Kumar ~ November 18, 2008 at 7:45 a.m.
Ok, I'll be waiting! What about the vertical version?
nice! i like it. fwiw i'm in ff2 and had no issues.
permalink steve ~ October 7, 2008 at 5:20 p.m.