BootStrap DateTimePicker на dp.change запускает оба сборщика

Question

У меня есть два входа для начала и даты окончания. В начале «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

Я знаю, что это в то время, что этот вопрос открыт, но лучше поздно, чем никогда, верно?

Вы обнаружили эту ошибку #1075 библиотеки js bootstrap-datetimepicker. К счастью для вас решение довольно просто, когда вы создаете второй datetimepicker объект (#end_time), вы должны установить атрибут 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