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
Time!

Usage

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:

$('#time-input').timepicker(/*options*/);

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 =>

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

Duration =>

$('#durationExample').timepicker({
    'minTime': '3:00pm',
    'maxTime': '12:30pm',
    'showDuration': true
});

And much more – try the plugin.

License: MIT

Home & demo:

http://jonthornton.github.io/jquery-timepicker

Find jQuery time picker on GitHub:

https://github.com/jonthornton/jquery-timepicker

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!

Enjoy!

Share:Share on Facebook2Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1