Timepicker for jQuery – Demos and Documentation
Description: A lightweight, customizable jQuery timepicker plugin inspired by Google Calendar. Add a user-friendly timepicker dropdown to your app in minutes.

# jquery.timepicker

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. View the source code on GitHub or download (zip).

Full documentation available here

### 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());
    });

### DisableTimeRanges Example

Prevent selection of certain time values.

    $('#disableTimeRangesExample').timepicker({
    	'disableTimeRanges': [
    		['1am', '2am'],
    		['3am', '4:01am']
    	]
    });

### 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 });

### forceRoundTime Example

jquery-timepicker allows entering times via the keyboard. Setting forceRoundTime to true will round the entered time to the nearest option on the dropdown list.

    $('#roundTimeExample').timepicker({ 'forceRoundTime': true });

### Select Example

Use jquery-timepicker with <select> elements too.

    $('#selectButton').click(function(e) {
    	e.preventDefault();
    	$('#selectExample').timepicker();
    	$(this).hide();
    });

### Datepair Example

to

Datepair source available here.

## Want to get paid to work on stuff like this?

Shameless plug: ParkWhiz is looking for talented developers to help us drag the parking industry out of the Stone Age. Visit ParkWhiz's jobs page or email jobs@parkwhiz.com and introduce yourself!

## Contact

Jon Thornton — [lastname].[firstname]@gmail.com

## Download

You can download this project in either zip or tar formats.
Get the source code on GitHub: jonthornton/jquery.timepicker

You can also clone the project with Git by running:

    $ git clone git://github.com/jonthornton/jquery-timepicker