javascript - 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

您可以根据 checkin 日期选择器的值限制 checkout 日期选择器的 minDate 和 maxDate。

我已使用 getMaxDate() 获取日期选择器的最大日期，如果它是结账选择器，我将 maxdate 设置为 15 + checkin 日期。同样，我使用 getMinDate() 获取日期选择器的最短日期，如果它是结账选择器，我将 mindate 设置为 checkin 日期。

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