Как ограничить диапазон datetimepicker за один месяц?

Question

Пример разработчика на range.

Например:

Если дата начала 07/01/2016, дата окончания должна быть не более чем 08.01.2016.

И при изменении даты окончания также будет изменена дата начала лимита и на один месяц.

Если я удалю одно из полей, например, конечное поле, в поле даты начала не будет ограничений.

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, если вы сбросите поле ввода даты. Вы выполните сброс minDate and maxDate с использованием false в качестве параметра.