私はdatetimepickerで関連するタイムフィールドを作成したい

Question

私は日付フィールドと葯の時間フィールドの間に関係を作りたいと思います。 私は日付を選択すると予約にこの日付の有効時間を与えてくれます。

0：私thierdフィールドに終了時間を与えるだろう、それは時間に30分

HTMLコードです

<div class="col-1-4 col-1-4-sm"> 
 
       <div class="controls"> 
 
        <input type="date" id="date" class="floatLabel form_date " name="arrive" > 
 
        <label for="arrive" class="label-date"><i class="fa fa-calendar"></i>&nbsp;&nbsp;Day</label> 
 
        <input type="date" class="datetimepicker" id="Linked" value="" readonly> 
 
       </div> 
 

 

 
      </div> 
 
      <div class="col-1-4 col-1-4-sm"> 
 
       <div class="controls"> 
 
        <input type="date" id="Start" class="floatLabel form_time" name="depart" /> 
 
        <label for="depart" class="label-date"><i class="fa fa-calendar"></i>&nbsp;&nbsp;start time</label> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-1-4 col-1-4-sm"> 
 
       <div class="controls"> 
 
        <input type="date" id="End" class="floatLabel" name="depart" /> 
 
        <label for="depart" class="label-date"><i class="fa fa-calendar"></i>&nbsp;&nbsp;end time</label> 
 
       </div> 
 
      </div>

JavaScriptを起動する必要があります

var dateToday = new Date(); 
 

 
$(function() { 
 
    
 
    $('.form_date').datetimepicker({ 
 
     //language: 'fr', 
 
     format:'dd/mm/yyyy', 
 
     //startDate: new date(), 
 
     weekStart: 1, 
 
     todayBtn: 1, 
 
     autoclose: 1, 
 
     startDate: dateToday, 
 
     todayHighlight: 1, 
 
     startView: 2, 
 
     minView: 2, 
 
     forceParse: 0, 
 
     linkField: "Linked", 
 
     linkFormat: "DD" 
 
    }); 
 
    $('.form_time').datetimepicker({ 
 
     //language: 'fr', 
 
     format:'H:ii p', 
 
     weekStart: 1, 
 
     todayBtn: 1, 
 
     autoclose: 1, 
 
     startDate: dateToday, 
 
     startView: 1, 
 
     minView: 0, 
 
     maxView: 1, 
 
     forceParse: 1, 
 
     showMeridian: 1, 
 
     minuteStep: 30, 
 

 
     linkField: "End", 
 
     linkFormat: "h:ii+30 p" 
 

 
    }); 
 

 
});

Answer 1

時間前、私は似たような試み、それは私のニーズに合わなかったので、bootrap-のDateTimePickerを使用しないことを決めました。 Yはこれを使用することにしましたplugin少し柔軟です。 onChangeDatetimeコールバックとallowedTimesプロパティを確認してください。私は、コールバックが日付と時刻の両方が変更されたとき、またはそのうちの1つだけのときにトリガされるかどうかはわかりません。日付と時刻のフィールドが離れていると助けになるかもしれません。