ブートストラップ時間ピッカーで、開始時間をドロップダウンから選択するには、継続時間のギャップが30分であるようにしてください。

Question

条件：時間は午前7時から午後9時までです。 私の要件は、選択した期間に応じてテーブルを読み込むことです。 私のコードは完全ではなく、動作しません。 私の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>

マイジャバスクリプトは以下の通りです。

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