jQuery time picker solution

A date pickers usually can handle dates only, here we have a jQuery time picker plugin.

jQuery time picker, easy to use in web projects

Pick show and show in the input a formatted time string. For this there is a nice JS timepicker plugin for jQuery, inspired by Google Calendar.

We know jQuery UI date picker, but when we implement something like booking and similar, we probably also need to select the time. Selecting time is missing in basic date picker plugin, but here is a remedy.

This plugin is an easy way to enhance standard form input fields helping users to select time (hours, minutes).

jQuery time picker solution


Include jQuery (>= 1.7) as well the plugin (with its CSS file) to the HTML document and run time picker method on the input field. For example:


That’s it. However this time picker allows many options to adjust. E.g. format can be adjusted as data attribute:

<input type="text" data-time-format="H:i:s" />

There are many options, methods and events, as well a possibility to adjust themes. See the documentation / GitHub page for details.

More examples:

Scroll default =>

$('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });

Set time =>

$('#setTimeButton').on('click', function (){
    $('#setTimeExample').timepicker('setTime', new Date());

Duration =>

    'minTime': '3:00pm',
    'maxTime': '12:30pm',
    'showDuration': true

And much more – try the plugin.

License: MIT

Home & demo:


Find jQuery time picker on GitHub:


See also:

Analog and digital jQuery world clock plugin – jClocksGMT.js

DrumJS – A jQuery animated date picker and value selector (iOS style)

Date range picker for Bootstrap

Material time picker library – a timer picker written in ES6 and SASS

Work with date and time in JavaScript? Try moment.js!