A lightweight, customizable jQuery timepicker plugin inspired by Google Calendar.

Use this plugin to unobtrusively add a timepicker dropdown to your forms. It's lightweight (2.5kb minified and gzipped) and easy to customize. or .

Basic Example

$('#basicExample').timepicker();

Scroll Default Example

Set the scroll position to local time if no value selected.

$('#defaultValueExample').timepicker({ 'scrollDefaultNow': true });

Set Time Example

Dynamically set the time using a Javascript Date object.

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

Duration Example

Set a starting time and see duration from that starting time. You can optionally set an maxTime as well.

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

Event Example

Trigger an event after selecting a value. Fires before the input onchange event.

$('#onselectExample').timepicker();
$('#onselectExample').on('changeTime', function() {
        $('#onselectTarget').text($(this).val());
});

timeFormat Example

timepicker.jquery uses the time portion of PHP's date formatting commands.

$('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });
$('#timeformatExample2').timepicker({ 'timeFormat': 'h:i A' });

Step Example

Generate drop-down options with varying levels of precision.

$('#stepExample1').timepicker({ 'step': 15 });
$('#stepExample2').timepicker({ 'step': 60 });

Select Example

Use jquery-timepicker with