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

## Basic Example

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

## Scroll Default Example

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

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

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

## noneOption Example

Custom options can be added to the dropdown menu.

    $('#noneOptionExample').timepicker({
    	'noneOption': [
    		{
    			'label': 'Foobar',
    			'className': 'shibby',
    			'value': 'oh hai'
    		},
    		'Foobar2'
    	]
    });

## 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': function(i) {
    		return (i%2) ? 15 : 45;
    	}
    });

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

jquery-timepicker can render itself as a select element too.

    $('#selectExample').timepicker();
    $('#selectButton').click(function(e) {
      $('#selectExample').timepicker('option', { useSelect: true });
      $(this).hide();
    });

## Non-input Example

jquery-timepicker can be bound to any visibile DOM element, such as spans or divs.

    $('#spanExampleTarget').timepicker()
    $('#spanExampleTarget').on('changeTime', function(e){
    	console.log($('#spanExampleTarget').timepicker('getTime'));
    });
    $('#openSpanExample').on('click', function() {
    	$('#spanExampleTarget').timepicker('show');
    });

## Datepair Plugin Example

jquery-timepicker is designed to work with the jquery-datepair plugin.

to

    <p id="datepairExample">
    	<input type="text" class="date start" />
    	<input type="text" class="time start" /> to
    	<input type="text" class="time end" />
    	<input type="text" class="date end" />
    </p>

    <script type="text/javascript" src="datepair.js"></script>
    <script type="text/javascript" src="jquery.datepair.js"></script>
    <script>
    	// initialize input widgets first
    	$('#datepairExample .time').timepicker({
    		'showDuration': true,
    		'timeFormat': 'g:ia'
    	});

    	$('#datepairExample .date').datepicker({
    		'format': 'yyyy-m-d',
    		'autoclose': true
    	});

    	// initialize datepair
    	$('#datepairExample').datepair();
    </script>

## Need Help?

Check the documentation or submit an issue on GitHub.