jquery - Jquery DatePicker 设置最小和最大日期

Question

我正在尝试制作一个具有日期选择器的网页，但我无法弄清楚如何动态设置最小和最大日期。我想要实现的是

1. 不要让用户选择今天日期之前的日期。
   
2. 选择日期后，将最大可选日期设置为 1 周，因此用户只能从所选日期的 7 天中选择。
   到目前为止，我已经做到了这一点，但它似乎并没有在每次用户选择新日期时更新。例如，如果我选择今天的日期 (23)，它确实将最大日期设置为 29，但如果我将选择的日期从 23 更改为 27，而不是让我从 27 选择到 3，它只允许我选择27到29。有人可以帮我吗？谢谢 ：）

$(document).ready(function() {
           
  $(function() {
      $('#txtArrivalDate').datepicker({
          dateFormat: 'mm-dd-yy',
          minDate: "-0d",
          onSelect: function(date) {
              selectedDate = date;
              $('#txtDepartureDate').datepicker('option', 'minDate', date);
              $("#txtDepartureDate").datepicker("refresh");
              $('#txtDepartureDate').datepicker('option', 'firstDay', date);
              $('#txtDepartureDate').datepicker('option', 'maxDate', '+7d');
          }, //end of onSelect attribute

          onClose: function(date) {
          }, //end of onClose

      }); //end of txtArrivalDate datepicker
  }); //end of txtArrivalDate function

  $("#txtArrivalDate").change(function() {

      $('#txtDepartureDate').datepicker('option', 'firstDay', selectedDate);
      $('#txtDepartureDate').datepicker('option', 'maxDate', '+7d');
  });

  $(function() {
      $('#txtDepartureDate').datepicker({
          dateFormat: 'mm-dd-yy'
      });
  }) //end of txtDepartureDate function

}); //end of Ready function

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Arrival Date:-
  <input type="text" id="txtArrivalDate" /> <br /><br />
Departure Date:-
  <input type="text" id="txtDepartureDate" /> <br /><br />

标签： jqueryjquery-ui-datepicker

Answer 1

试试这个代码

$(document).ready(function(){
    $('#txtArrivalDate').datepicker({
        dateFormat: 'mm-dd-yy',
        minDate : "-0d",
    });

    $('#txtArrivalDate').change(function(){
        var sDate = $(this).datepicker("getDate");
        var minDate = $(this).datepicker("getDate");
        sDate.setDate(sDate.getDate()+7);
        $('#txtDepartureDate').datepicker({
            dateFormat: 'mm-dd-yy',
            maxDate : sDate,
            minDate : minDate,
        });
    })
});

祝你好运..