javascript - I want a bootstrap time picker to select start time from drop- down where duration time gap is 30 minutes -

condition: time should between 7.00 9.00 pm too. requirement load table according selected time duration. code not complete , not working. html code following..

<label class="col-md-1 control-label firstcol">reservation time : </label>   	<div class="col-md-2">  		<div class="input-group bootstrap-timepicker timepicker">  			<input data-provide="timepicker" class="form-control" name="txtreservetimefrom" id="txtreservetimefrom" readonly="readonly" tabindex="2" data-toggle="tooltip" data-container="body" data-placement="bottom" />  		</div>  	</div>  <label class="col-md-1 control-label firstcol "> </label>  	<div class="input-group bootstrap-timepicker timepicker">  		<div class="col-md-1">  			<input data-provide="timepicker" class="form-control" data-time-format="h:i:s" name="txtreservetimeto" id="txtreservetimeto" readonly="readonly" tabindex="2" data-toggle="tooltip" data-container="body" data-placement="bottom" />  	</div>  </div>

my java scripts following.

$(document).ready(function(){              $('#txtreservetimefrom').timepicker({                   'mintime': '7:00am','maxtime':     '09:00pm','timeformat': 'h:i a'                  });                  $('#txtreservetimeto').timepicker({                   'mintime': '7:00am','maxtime': '09:00pm','timeformat': 'h:i a'                  });                                     $( "#txtreservetimefrom" ).on( "change", function() {                      loadresourcetable();                  });                  $( "#txtreservetimeto" ).on( "change", function() {                     loadresourcetable();                  });                  $("#txtreservedate").val(availabledates[0]);                  $('#txtreservetimefrom').timepicker('settime', '7:00am');                  $('#txtreservetimeto').timepicker('settime', '7:30am');                 loadresourcetable();              });    // changed code this.                         $('#txtreservetimefrom').timepicker({                      minutestep: '30',                      defaulttime: '7:00 am',                      mintime: '7:00 am',                        maxtime: '9:00 pm'                  });                  $('#txtreservetimeto').timepicker({                      minutestep: '30',                       defaulttime: '07:30 am'                    mintime: '7:00 am',                   maxtime: '09:00 pm'                                    });                 $(document).ready(function(){                                     $( "#txtreservetimefrom" ).on( "change", function() {                    loadresourcetable();                });                  $( "#txtreservetimeto" ).on( "change", function() {                      loadresourcetable();                  });                  $("#txtreservedate").val(availabledates[0]);                  $('#txtreservetimefrom').timepicker('settime', '7:00am');                  $('#txtreservetimeto').timepicker('settime', '7:30am');                 loadresourcetable();              });             

i went through , tried following links.

javascript dynamic time drop down, bootstrap-timepicker not working, responsive bootstrap 3 timepicker? , http://www.okler.net/forums/topic/timepicker-not-showing-when-click-on-input/

i beginner bootstrap , javascript. can please me this.

i found solution question posted above. set minimum , maximum time bootstrap time picker used following function.

    function validatetimes(element, e){           var maxminutes = 21 * 60;         var minminutes = 7 * 60;           var selectedminutes = ( ((e.time.meridian == 'am') ? e.time.hours : (e.time.hours+12))* 60 ) + e.time.minutes;           if(!(e.time.meridian == 'pm' && e.time.hours == 12)){            if( selectedminutes<minminutes){                 $(element).timepicker('settime', '07:00 am');             }             else if(selectedminutes>maxminutes){                 $(element).timepicker('settime', '09:00 pm');             }         }      }

and called function when changing time of time picker wanted load table when according time changes. , used minutestep customize gap 30 minutes. below can find code.

        $('#txtreservetimefrom').timepicker({              defaulttime: '07:00 am',              minutestep: 30          }).on('changetime.timepicker', function(e){              validatetimes(this, e);              loadresourcetable();  	});            $('#txtreservetimeto').timepicker({              defaulttime: '07:30 am',              minutestep: 30          }).on('changetime.timepicker', function(e){              validatetimes(this, e);              loadresourcetable();          });