datetimepickerの範囲を1か月で制限する方法はありますか？

Question

rangeの開発者向けの例です。例えば

：

開始日が2016年7月1日である場合には、終了日は2016年8月1日以下にする必要があります。

また、終了日を変更すると、制限の開始日も1か月間も変更されます。

フィールドの1つ（たとえば、終了フィールド）を削除すると、開始日フィールドに制限がありません。

Answer 1

あなたがリンクされている例から始めて、あなたはあなたが必要なものを得るために数行のコードを追加することができます。

$('#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>

あなたは新しい日付の上限を計算する瞬間を使用することができます（addを参照し、 substract）。 doc saysの場合、dp.changeイベントは新しい日付を引数として取得し、日付入力フィールドをリセットするとfalseになります。パラメータとしてfalseを使用してminDate and maxDateをリセットします。