Wie kann der Bereich datetimepicker in einem Monat eingeschränkt werden?

Question

Entwicklerbeispiel auf der range.

Zum Beispiel:

Wenn das Startdatum 2016.07.01 ist, muss das Enddatum nicht mehr als 2016.08.01 sein.

Und wenn Sie das Enddatum ändern, ändert sich auch das Startdatum des Limits auch für einen Monat.

Wenn ich eines der Felder entferne, z. B. das Endfeld, wird im Feld Startdatum keine Begrenzung angezeigt.

Answer 1

Ausgehend vom Beispiel Sie verbunden sind, können Sie einige Zeilen Code hinzufügen zu bekommen, was Sie brauchen:

$('#datetimepicker6').datetimepicker(); 
 
$('#datetimepicker7').datetimepicker({ 
 
    useCurrent: false //Important! See issue #1075 
 
}); 
 

 
$("#datetimepicker6").on("dp.change", function (e) { 
 
    $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 
 
    var limit = e.date; 
 
    if(e.date){ 
 
    limit = e.date.add(1, 'month'); 
 
    } 
 
    $('#datetimepicker7').data("DateTimePicker").maxDate(limit); 
 
}); 
 

 
$("#datetimepicker7").on("dp.change", function (e) { 
 
    $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); 
 
    var limit = e.date; 
 
    if(e.date){ 
 
    limit = e.date.subtract(1, 'month'); 
 
    } 
 
    $('#datetimepicker6').data("DateTimePicker").minDate(limit); 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="container"> 
 
    <div class='col-md-5'> 
 
     <div class="form-group"> 
 
      <div class='input-group date' id='datetimepicker6'> 
 
       <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-5'> 
 
     <div class="form-group"> 
 
      <div class='input-group date' id='datetimepicker7'> 
 
       <input type='text' class="form-control" /> 
 
       <span class="input-group-addon"> 
 
        <span class="glyphicon glyphicon-calendar"></span> 
 
       </span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Sie Moment können neue Termin Grenze berechnen (siehe add und substract). Da das doc says, dp.change-Ereignis das neue Datum als Argument erhält, erhalten Sie false, wenn Sie das Datumseingabefeld zurücksetzen. Sie werden minDate and maxDate mit false als Parameter zurücksetzen.