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" param从现在开始计算差异，而不是从当前值开始计算差异。因此，在您的示例中，您命令datepicker显示所选日期与现在+ 2天之间的范围。所以你得到一个负差距=＆gt;没有显示范围。这是一个解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在jquery datepicker中增加maxDate

1 个答案: