dp.changeのBootStrap DateTimePickerは両方のピッカーを起動します

Question

開始日と終了日に2つの入力があります。 'dp.change'を開始すると、終了日のminDateを設定し、終了日に 'dp.change'を設定して、開始日のmaxDateを設定したいとします。

しかし、開始イベントは 'dp.change'の両方のオプションを設定します。それはmaxDateを設定したので、今よりももっと日付を選択することはできません。なぜ私は理解できません。

ご協力いただければ幸いです。

HTML

<div class="col-md-3"> 
    <div class="form-group"> 
    <label>{l s='From :' mod='everrent'}</label> 
    <div class='input-group date' id='start_time'> 
     <input type="text" class="form-control" /> 
     <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
     </span> 
    </div> 
    </div> 
</div> 
<div class="col-md-3"> 
    <label>{l s='To :' mod='everrent'}</label> 
    <div class="form-group"> 
    <div class='input-group date' id='end_time'> 
     <input type="text" class="form-control" /> 
     <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-calendar"></span> 
     </span> 
    </div> 
    </div> 
</div> 

JS

$(document).ready(function(){ 
    /* Initialise DateTimePickers */ 
    $('#start_time').datetimepicker({ 
    locale: 'fr', 
    format: 'YYYY/MM/DD - H:mm', 
    sideBySide: true, 
    stepping: 5 
    }); 
    $('#end_time').datetimepicker({ 
    locale: 'fr', 
    format: 'YYYY/MM/DD - H:mm', 
    sideBySide: true, 
    stepping: 5 
    }); 
    /* Setting up DateTimePickers */ 
    $('#start_time').on('dp.change', function(e) { 
    $('#start_time').data("DateTimePicker").minDate(new Date()); 
    $('#end_time').data("DateTimePicker").minDate(e.date); 
    }); 
    $('#end_time').on('dp.change', function(ev) { 
    $('#start_time').data("DateTimePicker").maxDate(ev.date); 
    }); 
}); 

Answer 1

私はそれが正しい、この質問が開いている間、決してより良い後半知っていますか？

jsライブラリbootstrap-datetimepickerの#1075が見つかりました。ラッキーあなたのためのソリューションは、あなたが二datetimepickerオブジェクト（#end_time）を作成するとき、あなたはこのようにfalseに属性useCurrentを設定する必要があり、非常に簡単です：

/* Initialise DateTimePickers */ 
    $('#start_time').datetimepicker({ 
    locale: 'fr', 
    format: 'YYYY/MM/DD - H:mm', 
    sideBySide: true, 
    stepping: 5 
    }); 
    $('#end_time').datetimepicker({ 
    locale: 'fr', 
    format: 'YYYY/MM/DD - H:mm', 
    sideBySide: true, 
    stepping: 5, 
    useCurrent: false //<--- this change 
    }); 
    /* Setting up DateTimePickers */ 
    $('#start_time').on('dp.change', function(e) { 
    $('#start_time').data("DateTimePicker").minDate(new Date()); 
    $('#end_time').data("DateTimePicker").minDate(e.date); 
    }); 
    $('#end_time').on('dp.change', function(ev) { 
    $('#start_time').data("DateTimePicker").maxDate(ev.date); 
    }); 

これを参照してください：JSFiddle