/ best free open source web resources /

Graphic Resources

An Experimental jQuery Time Picker

Posted · Category: Calendar, MIT License

Filling a time field in a form is relatively annoying. There is a bunch of JavaScript “time” pickers, but they seem to always stick to the same approach, most of them sucks in term of user interaction and usability .

Above all Haineault thinks 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 he has determined a set of goals and tried to design his own 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..)

An Experimental jQuery Time Picker

I love the idea and how it works. You can check the demo here. However, this project is experimental and in its very early stage, so there is probably still a handful of bugs to fix. Please feel free to give him some feedback.

Requirements: jQuery Framework
Demo: http://haineault.com/media/examples/jquery-utils/demo/ui-timepickr.html
License: MIT License

  • Pingback: Useful Links | Gilbert "Gilbitron" Pellegrom()

  • G

    Awesome way of getting user input!! Could really have used this in some past projects… Hope they take this out of the experimental stage soon!

  • That’s a really nice approach, but it could get a litle tricky for expanding to 24 hour formats and the selection of each minute.

  • yeah, a huge UI problem but no solution still acceptable. This is usable only for AM/PM time mode.

  • Your link to “demo” is broken. (Double http://)

  • Ray Cheung

    @ ../Ant

    It has been fixed. Thanks. :D

  • Pingback: Propiedad Privada » Blog Archive » De web varia()

  • Klas

    Nice work. Is it possible to add text like morning, lunch-time, and night as a first choice for us who don’t use am/pm?

  • Steve


    Great control. Looks professional. Is there a way to add a “Close” button? Maybe above the hour buttons? The problem is that if you want to manually enter a time, the menu stays up. Maybe you could close the menu when the value in the text box changes.

    Keep up the good work.


  • Anonymous

    Totally not intuitive for a non tech type of user. Not usable for anything other than tech based end users…I don’t think it’s going to be effective because it’s just too complex…3 levels to choose and form your time is not cool.

  • demo link still broken…

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons