1

Есть 2 календаря от bootstrap 3, нужно чтобы при выборе 2 дат, было выбрано не меньше 3 дней, при первом старте как вывеси получилось, а вот при изменении не понятно. То есть если менять поля "С" или "По" должна быть проверка если диапазон дат меньше 3 то выставлять 3 даты минимально, а если пользователь выбрал больше то ставить то что выбрал. Нужно как бы запретить пользователю выбрать диапазон меньше чем 3 дня.

$(function () {                
  $('#datetimepicker1').datetimepicker({
  	minDate: moment(),
    defaultDate: moment(),
    format: 'DD.MM.YY'
  });

  $('#datetimepicker2').datetimepicker({
  	format: 'DD.MM.YY',
  	minDate: moment().add(3, 'days'),
    defaultDate: moment().add(3, 'days'),
    useCurrent: false
  });

  $("#datetimepicker1").on("dp.change", function (e) {
    $('#datetimepicker2').data("DateTimePicker").minDate(e.date.add(3, 'days'));    
  
  });      

  $("#datetimepicker2").on("dp.change", function (e) {
    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' >
                    С <input id='datetimepicker1' type='text' class="form-control" />
                </div>
                <div class='input-group date'>
                    По <input id='datetimepicker2' type='text' class="form-control" />
                </div>
            </div>
        </div>

1 ответ 1

2

Решил сам))) через moment.js

$(function () {                
  $('#datetimepicker1').datetimepicker({
  	minDate: moment(),
    defaultDate: moment(),
    format: 'DD.MM.YY'
  });

  $('#datetimepicker2').datetimepicker({
  	format: 'DD.MM.YY',
  	minDate: moment().add(3, 'days'),
    defaultDate: moment().add(3, 'days'),
    useCurrent: false
  });

  $("#datetimepicker1").on("dp.change", function (e) { 
    $('#datetimepicker2').data("DateTimePicker").minDate(e.date.add(3, 'days')); 
    if(moment(e.date).isAfter($('#datetimepicker2').data("DateTimePicker").date())){
      $	('#datetimepicker2').data("DateTimePicker").date(e.date);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' >
                    С <input id='datetimepicker1' type='text' class="form-control" />
                </div>
                <div class='input-group date'>
                    По <input id='datetimepicker2' type='text' class="form-control" />
                </div>
            </div>
        </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.