我想要一個自舉時間選擇器從下拉菜單中選擇持續時間間隔爲30分鐘的開始時間

Question

條件：時間也應該在7.00 AM到9.00 PM之間。 我的要求是根據選定的持續時間加載一個表。 我的代碼不完整，無法使用。 我的HTML代碼如下..

<label class="col-md-1 control-label firstcol">Reservation Time : </label> 
 
\t <div class="col-md-2"> 
 
\t \t <div class="input-group bootstrap-timepicker timepicker"> 
 
\t \t \t <input data-provide="timepicker" class="form-control" name="txtReserveTimeFrom" id="txtReserveTimeFrom" readonly="readonly" tabindex="2" data-toggle="tooltip" data-container="body" data-placement="bottom" /> 
 
\t \t </div> 
 
\t </div> 
 
<label class="col-md-1 control-label firstcol "> To </label> 
 
\t <div class="input-group bootstrap-timepicker timepicker"> 
 
\t \t <div class="col-md-1"> 
 
\t \t \t <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" /> 
 
\t </div> 
 
</div>

我的Java腳本如下。

$(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(); 
 
      }); 
 
     

我已經經歷了，並試圖以下鏈接。

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/

我來引導和JavaScript初學者。有人可以幫助我這個。

Answer 1

我找到了我上面發佈的問題的解決方案。爲了設置自舉時間選擇器的最小和最大時間，我使用了以下函數。

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

和不斷變化的時間選擇器的時候，我調用的函數，因爲我想根據時間的變化時加載的表。並使用分鐘步驟來定製差距爲30分鐘。您可以在下面找到該代碼。

 $('#txtReserveTimeFrom').timepicker({ 
 
      defaultTime: '07:00 AM', 
 
      minuteStep: 30 
 
     }).on('changeTime.timepicker', function(e){ 
 
      validateTimes(this, e); 
 
      loadResourceTable(); 
 
\t }); 
 

 
     $('#txtReserveTimeTo').timepicker({ 
 
      defaultTime: '07:30 AM', 
 
      minuteStep: 30 
 
     }).on('changeTime.timepicker', function(e){ 
 
      validateTimes(this, e); 
 
      loadResourceTable(); 
 
     });