Options

Increase Decrease direction:

set increase hour or minute direction using increase_direction as 'down' or 'up', default is 'down'.

<script type='text/javascript'>
	$('#timepicker1').timepicki({increase_direction:'up'}); 
</script>

Minimum hour:

set minimum hour which means we can set minimum value of hour for project requirement, default is 1.

<script type='text/javascript'>
	$('#timepicker2').timepicki({min_hour_value:4}); 
</script>

Maximum hour:

also can set maximum hour same like minimum hour, default is 12.

<script type='text/javascript'>
	$('#timepicker3').timepicki({max_hour_value:8}); 
</script>

Add custom class

add custom class name in timepicki for our own like css purpose.

<script type='text/javascript'>
	$('#timepicker4').timepicki({custom_classes:"myclass"});
</script>

for example here i added myclass for timepicki, then set color:#5CB85C for .myclass class's child inputs.

Don't use Meridian (AM/PM) indication

with this option you can choose to hide the AM/PM selector. Ideal if you want a 24 hour clock.

<script type='text/javascript'>
	$('#timepicker5').timepicki({show_meridian:false});
</script>

Set step size hour and minutes

with this option you can choose the step size with which minutes and hours have to increase or decrease.

<script type='text/javascript'>
	$('#timepicker6').timepicki({
		step_size_hours:2,
		step_size_minutes:15});
</script>

here the minutes are changed per quarter instead of per minute, and the hours will be changed per two.

Overflow minutes to hour counter

with this option you can choose that hours will be updated if we go over the maximum/minimum of the minutes counter. Changed step size for minutes as well for illustrative purposes.

<script type='text/javascript'>
	$('#timepicker7').timepicki({
		overflow_minutes:true,
		step_size_minutes:15});
</script>

Indicate start time

set the start time

<script type='text/javascript'>
	$('#timepicker8').timepicki({start_time: ["06", "00", "AM"]});
</script>

Disable Keyboard for Mobile

prevent keyboard to show up on mobile, side effect: you can't type your hour on desktop keyboard anymore either. Altering hours and minutes with arrows is still possible. So could become default option.

<script type='text/javascript'>
	$('#timepicker9').timepicki({disable_keyboard_mobile: true});
</script>

Reset

if want to reset time in input, to enable reset option

<script type='text/javascript'>
	$('#timepicker10').timepicki({reset: true});
</script>

Full 24-Hour example

more elaborate example of 24 Hour clock.

<script type='text/javascript'>
	$('#timepicker11').timepicki({
		show_meridian:false,
		min_hour_value:0,
		max_hour_value:23,
		step_size_minutes:15,
		overflow_minutes:true,
		increase_direction:'up',
		disable_keyboard_mobile: true});
</script>