BootStrap DateTimePicker on dp.change fires both pickers
<p>I have two inputs for a start and an end date. On start 'dp.change' I'd like to set minDate of end date and on end 'dp.change' set maxDate of start date. </p>

<p>But the start event set both options when 'dp.change'. It set its maxDate so i can't select greater date than... now. I can't understand why. </p>

<p>Any help will be appreciated.</p>

<p><strong>HTML</strong></p>

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

<p><strong>JS</strong></p>

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