jquery - 如何使用 jquery ui datepicker 设置 maxDate 和 minDate？

Question

我的日期范围低于示例，我想为我的 #checkout 输入设置最短日期。在从我的 #checkin.#checkout 搜索日期中选择了几天之后，日期范围内的搜索日期不能超过 15 天，这就是我要阻止它的原因

$(function() {

  var dateFormat = "DD/MM/YY",
    from = $("#checkin,.checkin").datepicker({
      numberOfMonths: 2,
      firstDay: 1,
      minDate: 0,
      onSelect: function(selectedDate) {

        window.setTimeout($.proxy(function() {
          $(this).parents(".book-holiday").find("#checkout,.checkout").focus();
        }, this), 10);
        var yenitarih = new Date();
        var date = $(this).datepicker('getDate');
        date.setTime(date.getTime() + (1000 * 60 * 60 * 24));

        $("#checkout,.checkout").datepicker("option", "minDate", date);
      },
      isTo1: true,
    }).on("change", function() {
      to.datepicker("option", "minDate", getDate(this));
    }),
    to = $("#checkout,.checkout").datepicker({
      firstDay: 1,
      numberOfMonths: 2,
      minDate: 0,
      maxDate: +15,
      onSelect: function(selectedDate) {
        $(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
        $("#checkin,.checkin").datepicker("option", "maxDate", selectedDate);
      },
    }).on("change", function() {
      from.datepicker("option", "maxDate", getDate(this));
    });


});

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet" />

<div class="book-holiday">
  <input type="text" id="checkin" />
  <input type="text" id="checkout" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Answer 1

您可以使用 Moment.js 进行有关日期内容的所有计算。

我使用了 #checkin 的 onSelect 事件，并设置了 #checkout 日期选择器的 minDate 和 maxDate。

因此无论 #checkin 日期是什么，#checkout 都将在它之后 15 天。

下面是您可以查看的 Fiddle。

Fiddle Link

编辑

请检查下面的 fiddle ，我没有使用 Moment.js

Without Moment Fiddle