### TimePicki v2.0

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

Any queries? Download

Copyrights @Timepicki, by @senthil2rajan.