如何在jquery数据报警器中增加maxDate

Question

我在第一个输入框中有两个输入框，用户选择日期，在第二个输入框中，选择的日期必须是从选定的日期起2天，下面是代码片段

​

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

但是它也不起作用，我知道我遗漏了一些参数，但它是什么呢？

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

​