0

我有一个预订表格，我只需要两个输入.checkin，.checkout这就是为什么我使用datepicker一切daterange都很好的原因几乎一件事是我如何在两个日期之间只选择 15 天？

顺便说一句，我正在使用pikaday 插件 MY CODE

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

4

1 回答 1

1

您可以根据 checkin datepicker 的值来限制 checkout datepicker的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>

于 2017-02-09T15:13:32.670 回答