2016-11-12 2 views
0

を設定し、開始と終了:JS Timepickerは、2件のインスタンスがありますが、私は<a href="http://amsul.ca/pickadate.js/time/" rel="nofollow noreferrer">http://amsul.ca/pickadate.js/time/</a></p> <p>から<em>timepicker</em>を持って調和のとれたminとmax回

<div align="center"> 
    <span class="glyphicon glyphicon-time"></span> 
    <label for="start_time">Start</label> 
    <input name="start_time" id="start_time"> 
    <p></p> 
    <span class="glyphicon glyphicon-time"></span> 
    <label for="finish_time">Finish</label> 
    <input name="finish_time" id="finish_time"> 
</div> 

JSは、最小値と最大時間を設定します。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#start_time').pickatime({ 
     //format: 'h:i A',   // Displayed and application format 
     formatSubmit: 'HH:i:00', 
     hiddenName: true, 
     interval: 15,    // Interval between values (in minutes) 
     min: '3:00 AM',    // Starting value 
     max: '6:00 PM'    // Ending value 
     //finish_time.set('min': start_time) 
    }); 

    $('#finish_time').pickatime({ 
     //format: 'h:i A',   // Displayed and application format 
     formatSubmit: 'HH:i:00', 
     hiddenName: true, 
     interval: 15,    // Interval between values (in minutes) 
     min: '3:00 AM',   // Starting value 
     max: '6:00 PM'    // Ending value 
    }); 
}); 
</script> 

私がやっていることは、start_time pickerの最小開始時間を午前3:00に設定していますが、finish_time pickerの最小値はw start_time + 15分に選択された。あなたはこれについてどうやって行きますか?

+0

このプラグインは、メソッド名_onSet_を持っています。 _start_time_要素の_min_値を設定するには_start_time_要素でそれを使用できます。 _start_time_ value + 15分が翌日であるかどうかを計算しなければならないと思います! – EhsanT

+0

start_timeに、私はonSetを追加します:updateMin()\t function updateMin(){ \t \t $( '#finish_time')。setAttribute(min、$( "#start_time")。 \t} – Aaron

+0

あなたが気付かなかった場合は、昨日回答を投稿しました! – EhsanT

答えて

2

OK、あなたのコードはこのようなものですが、私のコメントで述べたように、start_time + 15分が翌日であるかどうかをチェックする必要があります。

HTML

<div align="center"> 
    <span class="glyphicon glyphicon-time"></span> 
    <label for="start_time">Start</label> 
    <input name="start_time" id="start_time"> 
    <p></p> 
    <span class="glyphicon glyphicon-time"></span> 
    <label for="finish_time">Finish</label> 
    <input name="finish_time" id="finish_time"> 
</div> 

javascriptの

$(document).ready(function(){ 
    var finish_time = $('#finish_time').pickatime({ 
     //format: 'h:i A',   // Displayed and application format 
     formatSubmit: 'HH:i:00', 
     hiddenName: true, 
     interval: 15,    // Interval between values (in minutes) 
     min: '3:00 AM',   // Starting value 
     max: '6:00 PM'    // Ending value 
    }); 

    var start_time = $('#start_time').pickatime({ 
     //format: 'h:i A',   // Displayed and application format 
     formatSubmit: 'HH:i:00', 
     hiddenName: true, 
     interval: 15,    // Interval between values (in minutes) 
     min: '3:00 AM',    // Starting value 
     max: '6:00 PM',    // Ending value 
     onSet: function(context) { 
      var finish_time_min = context.select + 15; 
      var hours = Math.floor(finish_time_min/60); 
      var minutes = (finish_time_min - (hours * 60)); 
      finish_time.pickatime('picker').set('min', [hours, minutes]); 
     }     
    }); 
}); 
関連する問題

 関連する問題