logo

A Novel Time Picker Control - JavaScript

JavaScript Date Picker controls are ten-a-penny, as we all know, but the same can't be said of Time Pickers. Of those that I've seen there isn't one that sticks out as a clear winner or even one that is remotely useful.

Last week though I stumbled upon one that I thought was quite unique and one I could imagine myself using should the situation arise. The NoGray Time Picker (beware the adverts!).

Although it's based on Mootools it should be easy to port if it took your fancy.

What do you think? Nice and intuitive isn't it. Although it took me a while to work out to click AM/PM to toggle it! Would be nice if moving the minute hand round a whole turn advanced the hour hand by one, but, hey.

In lieu of anything better I think this is worth considering for use. Maybe one day somebody will create a web version of the Notes client time picker, which I've always quite liked. Maybe that's been done already?

Comments

    • avatar
    • Jon
    • Mon 2 Jun 2008 09:54 AM

    When I was working at my old company I had developed a javascript time picker that looked just like the notes time picker.

    It really was not that difficult to duplicate...just took some effort ;)

  1. I think this picker is pretty, and may be intuitive for those of us old enough to read analog clocks as naturally as breathing.

    I wonder how the analog clock image will be perceived by the younger generation who are all digital.

    Also, it doesn't seem to have great usability without very good motor control skills with a mouse (or no mouse at all).

    If accessibility of the website is an issue, I don't think this picker passes muster, so it would have to be used as an alternative with some other more screen reader and keyboard friendly tool available as well.

    In a Domino context, the requirement for an XHTML doctype is also fairly problematic. Even the new Domino 8.5 Beta 1 XPage implementation is only HTML 4.01/strict.

    • avatar
    • noon
    • Mon 2 Jun 2008 11:09 AM

    Just what I wanted :)

  2. What do you think about an applet ?

    I'v found one that seems like Lotus Client here :

    {Link}

    A very cool stuff ;) ...

    • avatar
    • veer
    • Mon 2 Jun 2008 03:31 PM

    I don't think I like it ( Hey, I'm entitled to my opinion ).

    A picker should be easy enough to use with a few clicks. I don't know if I like the dragging and leaving it at the exact spot.

    When I had to build a timepicker a while back, I went for a popup with 3 drop-down fields. The first drop down had 01 thru 12 for the hour, 00 thru 55 for minute ( I had minutes in multiples of 5 ) and a drop down for AM/PM.

    I still like that one. Can use the mouse or do type ahead. No explanation needed.

    03 35 PM

    ..

  3. I wrote a time parse with dropdown back in September 2006. {Link}

    Type in 1p and it translates to 1:00 PM, click the arrow and you get a dropdown. Press the down or up arrow keys and the dropdown appears and you can increment or decrement the time. I like it because it works with the keyboard as well as the mouse.

  4. Sorry, but this does me remind me to the days that we put ticking clocks on website, because... someone wrote somewhere a ticking clock JS function and we were able to copy and paste it on our web pages....

    • avatar
    • Dave S
    • Tue 3 Jun 2008 03:26 AM

    Very simple and clean looking but not for me I'm afraid. I prefer keyboard input and tend to use drop down boxes as veer does, then combine them into a hidden time/date field (on submit) if neccessary for calculations.

    • avatar
    • Jake Howlett
    • Tue 3 Jun 2008 04:34 AM

    Very nice Tanny!

    Reminds me of the ultra-cool datejs.com date parser - {Link}

    • avatar
    • Des
    • Tue 3 Jun 2008 06:36 AM

    I agree with veer , dropdowns or up / down buttons would be a far better solution.

  5. As a special case, it adds a nice touch. Unfortunately the usability criticisms are quite valid. I say unfortunate because I rather like fountain pens, analog clocks and things that require winding rather than batteries. If nothing else, it can be instructional for creative UI coding with js and or moo tools.

  6. I like it!

    It's nice to see something responsive on the web ... even if it's not accessible to all. It's easy enough to create a server side version that's accessible to those that cannot use this ... though I think the drop downs are probably more universally recognized with far less explaination.

  7. I've become a big fan of the iphone control with the spinner dials. I'd like to see an implementation of that. Maybe I'll get around to it one of these centuries.

  8. how can i use this function without having to show the picture and with a 24 hour mode (i don't like the pm/am thing and specially the mouse's use) .

    hope got some help from you.

    thnx a lot for any suggestion

  9. I am unable to set it control in table. when i use this time picker control, then watch shows out from div to right side and cross image shows in middle of watch. plz help me...

    Thanks in advance.

  10. Jake,

    It's funny that whenever I am researching code for a web development project, I always seem come across a link back to Codestore ...

    I had already found the example above but I passed on it for my project.

    I have tried various solutions to this problem but never found the "perfect" one yet.

    Currently I am playing with a pop-up form with 3 dropdowns (hours, minutes, ampm) as Veer mentioned above.

    I am having problems with postioning the popup and updating the main form time fields (I have six time slots), but will probably solve it eventually.

    Still using dropdowns presents issues (i.e. increments of 5 minutes, 3 controls, popups, etc.).

    So I thought i would search for a TimeSpinner instead of a TimePicker and found 2 solutions plus I found a great blog entry that i wanted to pass on.

    1) Blog on Spinner

    http://blog.paranoidferret.com/index.php/2007/10/29/javascript-controls-the-spin-control/

    2) Forum Entries and Code on Time Spinner

    http://www.codingforums.com/showthread.php?t=110861

    Hopefully the Links work ... I resent them in an email just in case.

    The Spin Control Blog entry looks very promissing, I want a simple solution.

    I will update this post if I am sucessfull

    • avatar
    • gern
    • Thu 19 Mar 2009 01:03 PM

    Nice, but doesn't work too well with FF. When you click and drag an image in FF, it drags the image with it so if you miss the hands of the clock, you're actually dragging the image. Very annoying.

  11. Another TimePicker link

    http://home.jongsma.org/software/js/datepicker

  12. Another TimePicker link

    http://www.ama3.com/anytime/#PopupDemos

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Mon 2 Jun 2008

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content