pikaday плагин 15 день между двумя датами

Question

У меня есть форма бронирования, и мне нужно всего два входа .checkin и .checkout, и именно поэтому я использовал datepicker с daterange. Все идет хорошо, почти все, что я могу выбрать всего 15 дней между две даты?

кстати я использую pikaday plugin МОЙ КОД

$(document).on('focus', '.checkin, .checkout', function(){ 
 
    return new Pikaday({ 
 
    numberOfMonths: 2, 
 
    field: this, 
 
    format: "DD.MM.YYYY", 
 
    minDate: new Date(), 
 
    firstDay: 1, 
 
    maxDate: new Date(2020, 12, 31), 
 
    onSelect: function() { 
 
    e = this.getDate(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" rel="stylesheet"/> 
 
<div class="form"> 
 
<input type="text" class="checkin" placeholder="Checkin" /> 
 
<input type="text" class="checkout" placeholder="Checkout" /> 
 
</div>

Answer 1

Вы можете ограничить minDate & maxDate в кассе DatePicker на основе стоимости оформленного ввода DatePicker.

Я использовал getMaxDate(), чтобы получить максимальную дату Datepicker & если это выезд сборщика, я устанавливаю maxdate как 15 + CheckIN даты. Аналогичным образом у меня есть getMinDate(), чтобы получить минимальное время для datepicker &, если это контролер, я устанавливаю mindate в качестве даты регистрации.

$(document).on('focus', '.checkin, .checkout', function(){ 
 
    return new Pikaday({ 
 
    numberOfMonths: 2, 
 
    field: this, 
 
    format: "DD.MM.YYYY", 
 
    minDate: getMinDate(this), 
 
    firstDay: 1, 
 
    maxDate: getMaxDate(this), 
 
    onSelect: function() { 
 
    e = this.getDate(); 
 
    } 
 
    }); 
 
}); 
 
function getMaxDate(element){ 
 
    if(element.className=='checkout' && element.parentNode.querySelector('.checkin').value) 
 
    return new Date(new Date(element.parentNode.querySelector('.checkin').value).getTime()+(15*24*60*60*1000)); 
 
else 
 
    return new Date(2020, 12, 31); 
 
    } 
 
function getMinDate(element){ 
 
    if(element.className=='checkout' && element.parentNode.querySelector('.checkin').value) 
 
    return new Date(element.parentNode.querySelector('.checkin').value); 
 
    else 
 
    return new Date(); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" rel="stylesheet"/> 
 
<div class="form"> 
 
<input type="text" class="checkin" placeholder="Checkin" /> 
 
<input type="text" class="checkout" placeholder="Checkout" /> 
 
</div>