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

Question

我有一个预订表格，我只需要两个输入.checkin和.checkout ，这就是为什么我已经使用datepicker与daterange万事OK会几乎有一两件事是我可以选择日期仅有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> 

Answer 1

您可以根据签入日期选择器的值限制签出日期选择器的minDate和maxDate 。

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