Question

我的日期范围低于示例，我想为#checkout输入设置最短日期。从#checkin #checkout $(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)); }); });搜索日期中选择一天后，日期范围内的搜索日期不能超过15天，这就是我想要阻止它的原因

＆＃13;

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

＆＃13;

enquiries

＆＃13;

Answer 1

你可以尝试这个。它应该工作。您只需要创建函数daysBetween（）：

$(function() {
  // Const with max days diff
  var MAX_DAYS_DIFFERENCE = 15;
  // your start date -- Date instance. Paste your date
  // your end date -- Date instance. Paste your date
  var startDate = new Date().format('yyyy-mm-ddThh:MM:ss');
  var endDate = new Date().format('yyyy-mm-ddThh:MM:ss');

  var dateFormat = "DD/MM/YY";
  var from = $("#checkin,.checkin").datepicker({
      // You can set date format
      dateFormat: 'yyyy-mm-ddThh:MM:ss',
      maxDate: endDate,
      // Your code
      numberOfMonths: 2,
      firstDay: 1,
      onSelect: function(selectedDate) {

        startDate = $(this).datepicker('getDate');
        to.datepicker('option', 'minDate', startDate);
        // we compute the day difference and remove the maximum allowed date difference to find
        // how many days are above the difference and then we remove/add those days
        const daysDiff = daysBetween(startDate, endDate) - MAX_DAYS_DIFFERENCE;
        if (daysDiff > 0) {
          endDate.setDate(endDate.getDate() - daysDiff);
          to.datepicker('setDate', endDate);
        }
      },
      isTo1: true,
  });

  from.datepicker('setDate', startDate);

  var to = $("#checkout,.checkout").datepicker({
    firstDay: 1,
    numberOfMonths: 2,
    dateFormat: 'yyyy-mm-ddThh:MM:ss',
    minDate: startDate,
    maxDate: new Date() + 365 * 24 * 60 * 1000 * 1000,
    onSelect: function(selectedDate) {
      endDate = $(this).datepicker('getDate');
      from.datepicker('option', 'maxDate', endDate);
      // we compute the day difference and remove the maximum allowed date difference to find
      // how many days are above the difference and then we remove/add those days
      var daysDiff = daysBetween(startDate, endDate) - MAX_DAYS_DIFFERENCE;
      if (daysDiff > 0) {
        startDate.setDate(startDate.getDate() + daysDiff);
        from.datepicker('setDate', startDate);
      }
    },
  });
  to.datepicker('setDate', endDate);
});

Answer 2

您可以将Moment.js用于有关日期内容的所有计算。

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

所以#checkout约会#checkin将在15天之后发生。

以下是您可以查看的小提琴。

Fiddle Link

修改

请检查以下小提琴我没有使用过Moment.js

Without Moment Fiddle

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

2 个答案: