10 jQuery Time Picker Plugins

By Matt Burnett

What time is it? It’s time for a set of 10 super cool jQuery Time Picker plugins for your webpages! We see heaps of date pickers and calendar pickers out there but not so many time pickers, so it’s about time we showed you some! Have fun!

Updated: March 24, 2016 Removed outdated, broken, or deprecated plugins. Refreshed the entire list based on current design trends and standards, including several new additions.

1. jquery.timepicker

Looking for something simplistic? Inspired by Google Calendar, jquery.timepicker is a robust library designed to make time input as natural as possible.

jquery.timepicker example

Homepage/Demo | GitHub

2. Wickedpicker

As one of the best looking themes out there, Wickedpicker will add class to your website with a dead simple interface.

Wickedpicker example

Homepage/Demo | GitHub

3. jQuery Timepicker

Allow the user to type their time in free format or by adding a simple to use dropdown menu. Don’t confuse this plugin with the first one on our list, it’s an entirely different plugin with the same name!

jQuery Timepicker example

Homepage/Demo | GitHub

4. Bootstrap Material Datetimepicker

Don’t let the name confuse you, this plugin does not require Bootstrap (anymore)! Originally created to be used for Boostrap, this clean looking clock timepicker only requires jQuery.

Bootstrap Material Datetimepicker example

Homepage/Demo | GitHub

6. jQuery UI Timepicker

Is a jQuery UI time picker plugin build to match with other official jQuery UI widgets. Based on the existing date picker, it will blend nicely with your form and use your selected jQuery UI theme. The plugin is very easy to integrate in your form for you time (hours / minutes) inputs.

jQuery UI Timepicker

Homepage/Demo | GitHub

6. TimePicki

If your page needs a little more style, TimePicki might be right for you. Impress your users with this well designed modern looking plugin.

TimePicki example

Homepage/Demo | GitHub

7. jQueryTimeAutocomplete

More than just a timepicker, jQueryTimeAutocomplete allows the developer to easily implement a time range selector.

jQueryTimeAutocomplete example

Homepage/Demo | GitHub

8. jQuery Time Entry

Let your users change their time entry in a number of different ways, even their mousewheel!

jQuery Time Entry example

Homepage/Demo | GitHub

9. ptTimeSelect

Is a jQuery plugin that provides a UI for a user to define and set a time on a user form. It requires jQuery (obviously) as well as the dimmention.js plugin (available from jQuery as well).

ptTimeSelect example

Homepage/Demo | GitHub

10. Timeago

Timeago isn’t a timepicker itself, but it can help you easily build one by automatically updataing fuzzy timestamps. (e.g. “4 minutes ago” or “about 1 day ago”)


Homepage/Demo | GitHub

  • seangore

    How about no jQuery or JavaScript at all, and just use ?

    • Matt

      Unfortunately, according to, that’s not supported on any versions of IE or Firefox. It is MS Edge and Chrome only.

      There are certainly many other options for doing this, adding in a simple select list of predefined times or using a number of non-jQuery plugins. However, this was an update to an earlier article written in 2011 by another Sitepoint author, Sam Deering.



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.