Picking Time

It’s not often that new user interface conventions are born – or popularized. Even less so within the realm of web development. I’d argue that Sparklines and Lightbox are two of the best examples of UI conventions that were popularized on the web.

Recently Maxime Haineault announced a simple jQuery plugin for inputting a new time of day called jQuery.timepickr.js. Its principles are very similar to jQuery itself: Get users to input the time as simply as possible with as little input as possible.

To achieve this he made a “two click” time picker. The first click is within the time field. This activates the display and allows the user to choose the time – all of which is done by moving the mouse over the times that you desire. The final click is anywhere – filling in the time that was chosen. It’s hard to explain, you simply have to try it.

One thing that you’ll notice using it is that it’s fast. Very fast. I’d argue much faster than clicking into the input area, moving to the keyboard for entering the time, typing the time, then moving back to mouse.

But not only is it faster, but it’s also quite intuitive – which is rather rare for something that utilizes a completely new user interface convention.

A nice extra point is that the input is completely styled using the jQuery UI style conventions – which means that you’ll be able to customize it completely with the jQuery UI Themeroller.

I love the Themeroller and use it all the time to customize UI controls. It beats the pants off of any other UI customization tool that I’ve seen. Definitely give it a whirl. Consistently styling JavaScript user interface components can be incredibly annoying, but the Themeroller helps to make it sane – which is just perfect.

Posted: November 11th, 2008

27 Comments (Show Comments)

1. jason kuhn (November 11, 2008 at 10:55 am)

   the time picker is really neat, but it’s pretty easy to make it act buggy…

   all it takes is a sloppy clicker/mouser to screw around and the whole system breaks.

   somehow with some frantic mouse motions, i managed to get pm in 24h mode to show me 0-11 instead of 12-23.

2. Maxime Haineault (November 11, 2008 at 11:21 am)

   Wow thanks for the spin :)

   There’s still a lot improvement to do (I think it’s still broken in IE) but hopeful it will soon be more stable.

   Thanks again, you made my day !

3. Markus (November 11, 2008 at 11:22 am)

   hey john,

   very nice time component..

   about themeroller:
   could you write a tutorial or a real world example how to use it..? i’m don’t have a clue how i could utilize it for e.g. a new jquery plugin.

4. John Resig (November 11, 2008 at 11:33 am)

   @Maxime: Glad to hear it – it’s a great component and I’m excited to see it get some more traction.

   @Markus: The Filament guys (the ones who built the Themeroller) recently gave a presentation on just that.

5. Mike (November 11, 2008 at 11:35 am)

   “I’d argue that Sparklines and Lightbox are two of the best examples of UI conventions that were popularized on the web.”

   I’m not normally one to criticize cool new UI concepts, but Lightbox is the most awful thing I’ve seen on the web in a long time.

   – It’s slow. Or maybe it just seems slow. Fade out the page, zoom in the box, fade in the image. By a simple one-one-thousand two-one-thousand count, plain images seem a lot faster.

   – It breaks my back button. (Is there any worse commandment on the web?) If I’m not actively thinking about it, I try to go back from the image to the page the same way I always do: with the Back button.

   – It can’t take advantage of my browser’s image-viewing functionality. If an image is bigger than the window, they resize it so it fits. Lightbox doesn’t do this, or allow the browser to do it. I can’t even right-click on the image and “View Image”, for some reason.

   Lightbox is what’s wrong with the web today.

6. Lloyd Dalton (November 11, 2008 at 11:52 am)

   Awesome :)

   You might want add a link to the jquery plugin page for this plugin.

   http://plugins.jquery.com/project/jquery-timepickr

7. blm (November 11, 2008 at 12:30 pm)

   It may be faster than clicking the field then typing a time, but it’s probably not faster than tabbing to the field and typing a time. Frankly, I’ve never really understood the need for time pickers. Date pickers I get, if I want the first Saturday in January, it’s much easier to just pick it from a calendar than figure it out. But a time? 2PM is 2PM. Maybe it’s just me…

   And I strongly agree with Mike about Lightbox, for all the reasons he lists. It’s almost as bad as using Flash as your image viewer.

8. Francois Botha (November 11, 2008 at 12:31 pm)

   Great stuff! I really like this approach. A similar datepickr version would be nice. I’m still looking for a decent javascript date picker where I can get to 1950-01-01 within the least number of clicks.

9. Maxime Haineault (November 11, 2008 at 1:06 pm)

   @blm

   My first goal was to allow simple keyboard input, like you mentioned.

   As a Vim user I’m more of the keyboard type guy, but I’d argue that keyboard is faster in this case. I think it’s relative to each user.

   And sure 2PM is 2PM, but can you tell me the difference between 24:00 and 00:00 without opening Wikipedia ?

10. Mikael Vejdemo Johansson (November 11, 2008 at 1:16 pm)

    @Maxime

    Well, 2pm and 24/00 is a bit of a specious comparison. I personally know exactly what’s meant by 24:00 and 00:00, but things like 12:00PM trip me up.

11. Scott Jehl (November 11, 2008 at 3:26 pm)

    @Markus: We’re going to add tutorials on using ThemeRoller and document the full ThemeRoller CSS class API on the jQuery site very soon, but for now, you can check out these articles:

    About ThemeRoller, in general:
    http://www.filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/

    Developing ThemeRoller-Ready components:
    http://www.filamentgroup.com/lab/developer_your_own_jquery_themeroller_ready_components/

12. Keith (November 11, 2008 at 5:11 pm)

    Unfortunately, the timeepicker doesn’t seem to work in IE7, but I really like the way it works in FF. If the bugs can be worked out, I’d look forward to integrating it into an application or two.

13. Bruce (November 11, 2008 at 5:39 pm)

    That time picker looks promising for mouse or touch based input, I think what Maxime has done is very clever. Unfortunately, Maxime seems to have a bit of an off-putting attitude:

    “Some people reported that it didn’t work so well in the iPhone. Unfortunately I’m not cool, I don’t own a iPone and I don’t plan to buy one in a near future. So unless a skilled iPhone owner fix it for us, it won’t be fixed anytime soon.”

    That doesn’t strike me as the best way to encourage people to help out, iPhone users or otherwise. How about Android users? Are they also too cool to be treated with respect? Or only desktop users, perhaps?

14. JulienW (November 11, 2008 at 7:29 pm)

    @Bruce: he’s juste saying he doesn’t have an IPhone to work with… What is the problem with that ?

15. Maxime Haineault (November 11, 2008 at 9:58 pm)

    @Bruce

    I’m not “off-putting” at all, I’m just saying that I don’t plan to buy an iPhone just to make my plugin work in it, unless a client ask me to do it and pay for it of course.

    And as it’s stated on the site:

    “For that matter, if you really want a bug to be fixed quickly you can speed up the process by sending me your patches, I’ll be glad to merge them into trunk if the code looks decent and doesn’t break the unit tests. ”

    If someone provides me patches for these devices I’ll merge them into trunk, no questions about it.

16. Jesus DeLaTorre (November 11, 2008 at 10:29 pm)

    Any chance you do a UI conventions roundup?

17. Bruce (November 12, 2008 at 3:10 am)

    @JulienW and Maxime; “I’m not cool, I don’t own an iPhone” doesn’t strike either of you as condescending? I don’t have one myself, but I still find the tone harsh. You could get your message across just as well without the extra snark.

18. K (November 12, 2008 at 4:10 am)

    I tested out using timepicker for a survey form which required choosing a time many times throughout the form (as a response to when did you receive an emergency contact test). The user I showed it to did not like the interface at all, and it didn’t fit in well within the page as far as looks and the way it spreads out. It’s a neat app, but for my purposes it was not well suited to actual time-picking. By which I ended up going a simple two drop-down box input, one for the hour 1-12, and one for either am or pm. None of the users complained about it, with 1000+ responses (although there were a couple of complaints regarding other UI things on the form). So, in the end I was left to conclude that timepicker is a solution without a problem.

19. Paul van Dam (November 12, 2008 at 4:53 am)

    There is quite an issue with its usability. People who are used to 24H format don’t know about AM/PM. So it is pretty weird that you still have to choose AM/PM (which makes no sense to use 24H people) to select a time.

20. AMA3 (November 12, 2008 at 9:52 am)

    To toot my own horn, the interface of my Any+Time(TM) ATWidget Date/Time picker allows *any* time to be easily selected, not just quarter-hour increments. It also supports almost any format. See http://www.ama3.com/anytime/ for details.

    Although it currently doesn’t use jQuery (sorry!), it is on my agenda to make it possible to choose between jQuery and Prototype.

21. Maxime Haineault (November 12, 2008 at 9:54 am)

    @Paul van Dam

    Yes I know, however if I display 24 buttons it makes the picker way to large, hence the need to split the 24h in two.

    Initially I was displaying “day” and “night” labels but it was not really intuitive. So I used a am/pm separation, but I know it’s not an optimal solution.

    It’s probably the most complained thing until now.. If anyone has a better idea I’d love to hear about it.

22. Ido (November 12, 2008 at 2:40 pm)

    Very nice idea!
    I like to see new UI (the works!) to some ‘old’ (may be, too old) component that we using in our applications for the past 132 years.

23. rr (November 15, 2008 at 1:15 pm)

    innovative, but takes up too much real-estate. i dont think any enterprise application actually using this.

24. krushna (November 16, 2008 at 12:32 pm)

    nice thing..but demo or example will be appreciated….

25. steve (November 17, 2008 at 11:35 am)

    @krushna, you only have to click on the linked “jQuery.timepickr.js” in the second paragraph to get a demo.

26. CMS (November 19, 2008 at 4:20 am)

    Hello John, Maxime,
    TimePickr is indeed that kind of intuitive plugin that i fancy.
    But i ran into a problem.
    Using the remove method from John (http://ejohn.org/blog/javascript-array-remove/) on an array somewhere in my application, timepickr returns an error: “Node cannot be inserted at the specified point in the hierarchy” code: “3”. This is because of the fact, that the method “buildMenu” from timepickr tries to append something to the “menu”.
    If i put out the “ranges” into firebug console i get an array with three objects, the first of it contains this innerHTML:
    ampmfunction (from, to) {\n var rest = this.slice((to || from) + 1 || this.length);\n this.length = from < 0 ? this.length + from : from;\n return this.push.apply(this, rest);\n}

    @John, Maxime: Why does this method appear in the innerHTML and of course throws that above mentioned error?

    Thanks for any hints,
    Regards,
    Christoph

27. pd (April 29, 2009 at 6:00 am)

    is there an equivalent for date picking?

Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.