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。

我已经使用 getMaxDate() 获取日期选择器的最大日期，如果它是结帐选择器，我将 maxdate 设置为 15 + 签到日期。同样，我使用 getMinDate() 获取日期选择器的最小日期，如果它是结帐选择器，我将 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>

pikaday插件两个日期之间的15天

pikaday plugin 15 day between two date

javascript

jquery

datepicker

date-range

pikaday