BootStrap DateTimePicker auf dp.change feuert beide Picker

Question

Ich habe zwei Eingänge für ein Start-und ein Enddatum. Beim Start 'dp.change' möchte ich minDate des Enddatums setzen und am Ende 'dp.change' maxDate des Startdatums setzen.

Aber das Startereignis hat beide Optionen gesetzt, wenn 'dp.change'. Es stellte sein maxDate ein, also kann ich grösseres Datum als ... jetzt nicht auswählen. Ich kann nicht verstehen warum.

Jede Hilfe wird geschätzt.

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

Ich weiß, dass es eine Weile ist, dass diese Frage offen ist, aber besser spät als nie, nicht wahr?

Sie haben diesen Fehler #1075 der js-Bibliothek bootstrap-datetimepicker gefunden. Zum Glück für Sie ist die Lösung ganz einfach, wenn Sie das zweite datetimepicker Objekt (#end_time) erstellen, müssen Sie das Attribut useCurrent auf false wie folgt festgelegt:

/* 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); 
    }); 

sehen: JSFiddle