Ограничить диапазон дат на основе первой выбранной даты - PullRequest
Новая
       12

Ограничить диапазон дат на основе первой выбранной даты

0 голосов
/ 20 февраля 2019

Я использую bootstrap-datepicker.У меня есть 2 поля ввода, и я хочу ограничить второй ввод только для следующих 5 дней с первой даты после того, как пользователь выберет дату из первого поля ввода. 

date 1 <input type="text" class="datepicker"><br>
date 2 <input type="text" class="datepicker2"><br>

$(function(){
    $('.datepicker').datepicker({
        format: 'mm-dd-yyyy',
        autoclose: true
        }).on('changeDate', function (selected) {
            var startDate = new Date(selected.date.valueOf());

            $('.datepicker2').datepicker('setStartDate', startDate);

            $('.datepicker2').datepicker('endDate', '+5d')
        });
});

$(function(){
    $('.datepicker2').datepicker({
        format: 'mm-dd-yyyy',
        autoclose: true,
        //endDate: '+5d'
    });
});

В настоящее время это не работает.Это сработало, хотя, если я поместил его в атрибут datepicker2.Пожалуйста, помогите и спасибо заранее

Вот пример кода: http://jsfiddle.net/jnh8pyst/

1 Ответ

0 голосов
/ 22 февраля 2019

Для этого вы должны использовать метод setEndDate и создать endDate плюс x дней, которые вы хотите, взяв за основу startDate, а затем используйте setEndDate для нужного выбора.

let endDate = new Date(startDate);
endDate = new Date(endDate.setDate(endDate.getDate() + 5));
$('.datepicker2').datepicker('setEndDate', endDate);

До конца у вас будет: 

$(function() {

  $('.datepicker').datepicker({
    format: 'mm-dd-yyyy',
    autoclose: true
  }).on('changeDate', function(selected) {
    let startDate = new Date(selected.date.valueOf());
    let endDate = new Date(startDate);
    endDate = new Date(endDate.setDate(endDate.getDate() + 5));
    $('.datepicker2').datepicker('setStartDate', startDate);
    $('.datepicker2').datepicker('setEndDate', endDate);
  });

  $('.datepicker2').datepicker({
    format: 'mm-dd-yyyy',
    autoclose: true,
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.min.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js"></script>
Date 1
<input type="text" class="datepicker">
<br> Date 2
<input type="text" class="datepicker2">
<br>
...