Question

我有一个预订表单，我只需要两个输入.checkout和datepicker这就是为什么我使用daterange和$(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(); } }); });一切都好了几乎一件事我怎么能在两个日期之间选择15天呢？

我使用pikaday plugin的方式我的代码

＆＃13;

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

＆＃13;

//localhost/*

＆＃13;

Answer 1

您可以限制minDate＆amp;结帐日期选择器的maxDate基于checkin datepicker的值。

我已使用getMaxDate()获取datepicker＆amp;的最长日期如果是结账选择器，我将maxdate设置为15 +签入日期。同样，我使用getMinDate()来获取datepicker＆amp;的最小日期。如果是结账选择器，我将mindate设置为签入日期。

＆＃13;

$(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();
  }

＆＃13;

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

＆＃13;

pikaday插件两天之间的15天

1 个答案: