如何在 jquery datepicker 中增加 maxDate答案

【问题标题】：How to increase maxDate in jquery datepicker如何在 jquery datepicker 中增加 maxDate
【发布时间】：2017-09-29 08:48:46
【问题描述】：

我在第一个输入框中有两个输入框，用户选择日期，在第二个输入框中，应该选择的日期必须是从所选日期开始的 2 天，这是代码的 sn-p

$(function() {
  var checkIn = $("#date-1"); var checkOut = $("#date-2");
  var todayDate = new Date();

  checkIn.datepicker({
    dateFormat:"dd-mm-yy",
    changeMonth:true,
    changeYear:false,
    minDate:todayDate

  });
  
  checkIn.on("change",function() {
    var select = checkIn.datepicker("getDate") ;
    var  checkOutDate = select;
    checkOut.datepicker('option','minDate',checkOutDate);
    checkOut.datepicker('option','maxDate',"+2d");
  });
  
  checkOut.datepicker({
    dateFormat:"dd-mm-yy",
    changeMonth:false,
    changeYear:false
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<form>
  <input type="text" id="date-1" placeholder="Date 1">
  <input type="text" id="date-2" placeholder="Date 2">
</form>

问题是它没有设置更改月份的日期与一些不同的日期我也尝试过这个

 checkOut.datepicker('option','maxDate',checkOutDate);

但它也不起作用，我知道我缺少一些参数，但它是什么？

【问题讨论】：

标签： jquery jquery-ui datepicker

【解决方案1】：

这是因为"+2d" 参数从现在开始计算差异，而不是从当前值开始计算。因此，在您的示例中，您订购 datepicker 以显示所选日期和现在 + 2 天之间的范围。所以你得到一个负差距=>没有显示范围。这里有一个解决方案：

$(function() {
  const checkIn = $("#date-1");
  const checkOut = $("#date-2");
  const todayDate = new Date();

  checkIn.datepicker({
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: false,
    minDate: todayDate,
  });
  
  checkOut.datepicker({
    dateFormat: "dd-mm-yy",
    changeMonth: false,
    changeYear: false,
  });
  
  checkIn.on("change", function() {
    const checkOutDate = checkIn.datepicker("getDate");
    const diffDate = checkOutDate - todayDate
    const fromNow = Math.ceil(diffDate / 1000 / 60 / 60 / 24);
    
    checkOut.datepicker("option", {
      minDate: fromNow,
      maxDate: fromNow + 2,
    });
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
  
<form>
  <input type="text" id="date-1" placeholder="Date 1">
  <input type="text" id="date-2" placeholder="Date 2">
</form>

【讨论】：