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

Question

Condition: Time should be between 7.00 AM to 9.00 PM too. My requirement is to load a table according to the selected time duration. My code is not complete and it is not working. My html code is as 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 "> To </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 are as 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();
            });

// Now I changed the code like 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 already went through and 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 am a beginner to bootstrap and JavaScript. Can someone please help me with this.

Would be helpful to know what library you are using with the code above — dmoo, Jul 28 '16 at 10:36
@dmoo - bootstrap-timepicker.js , bootstrap-timepicker.min.css, bootstrap-timepicker.min.js, bootstrap-timepicker.css — DTJ, Jul 28 '16 at 13:51
Still I am unable to set minTime and maxTime for the time picker. Above I have edited the Java script code snippet. — DTJ, Jul 28 '16 at 14:16

score 0 · Answer 1 · answered Aug 01 '16 at 09:15

I found the solution for my question posted above. To set the minimum and maximum time for a bootstrap time picker I used the 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 I called the function when changing the time of time picker as I wanted to load a table when according to time changes. And used minuteStep to customize the gap to 30 minutes. Below you can find that 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();
        });

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

1 Answers1