jQuery UI 动态启用日期

Question

我正在使用 jQuery UI 日期选择器作为预订系统。这是一个外观示例：

如您所见，第 27 个已禁用。这意味着如果用户 select 的入住日期早于 27 日，他应该能够 select 早于 27 日或 的退房日期 但不超过：

（禁用日期表示它可以接受退房但不能接受入住）

我正在动态设置 maxDate 以便用户不能 select 超出该日期的退房日期：

$("#datepicker").datepicker('option', 'maxDate', minDate.toDate());

目前 maxDate 是 27 日，但由于它在初始化时被禁用，用户无法 select 将其作为退房日期。因此，我想要完成的是，如果用户 select 在此之前的入住日期，则启用 27 日，如果用户取消 select 的入住日期，则将其禁用。

这里有一个JSFiddle来说明问题。

Answer 1

考虑以下几点：

https://jsfiddle.net/Twisty/vt9Lqy1f/96/

JavaScript

$(function() {

  let finalPriceObj = {
      '2021-08-24': {
        'newRate': "10000"
      },
      '2021-08-25': {
        'newRate': "10000"
      },
      '2021-08-26': {
        'newRate': "10000"
      },
      '2021-08-28': {
        'newRate': "10000"
      },
      '2021-08-29': {
        'newRate': "10000"
      },
      '2021-08-30': {
        'newRate': "10000"
      },
      '2021-08-31': {
        'newRate': "10000"
      },
      '2021-09-01': {},
    },
    missingDates = ['2021-08-27'],
    datepicker = $('#datepicker'),
    checkInDate = $("#checkInDate"),
    checkOutDate = $("#checkOutDate"),
    selectedDates = [];

  function dateToString(dt) {
    if (dt instanceof Date) {
      return $.datepicker.formatDate("yy-mm-dd", dt);
    }
    return "";
  }

  function stringToDate(st) {
    if (typeof st == "string") {
      return $.datepicker.parseDate("yy-mm-dd", st);
    }
    return null;
  }

  datepicker.datepicker({
    minDate: 1,
    dateFormat: "yy-mm-dd",
    beforeShowDay: function(date) {
      var skipMissing = (selectedDates.length >= 1 ? true : false);
      var show = true,
        highlight = "";
      if (!skipMissing && (missingDates.indexOf(dateToString(date)) >= 0)) {
        show = false;
      }
      if (selectedDates.length == 1) {
        if (date == selectedDates[0]) {
          highlight = "dp-highlight";
        }
      }
      if (selectedDates.length == 2) {
        if (date == selectedDates[0]) {
          highlight = "dp-highlight";
        }
        if (date == selectedDates[1]) {
          highlight = "dp-highlight";
        }
        if ((date > selectedDates[0]) && (date < selectedDates[1])) {
          highlight = "dp-range";
        }
      }

      return [show, highlight];
    },
    onSelect: function(dString, dInst) {
      if (selectedDates.length == 0) {
        checkInDate.html(dString);
        selectedDates.push(stringToDate(dString));
        if (stringToDate(dString) < stringToDate(missingDates[0])) {
          datepicker.datepicker("option", "maxDate", missingDates[0]);
        }
      } else if (selectedDates.length == 1) {
        checkOutDate.html(dString);
        selectedDates[1] = stringToDate(dString);
      } else {
        checkInDate.html("");
        checkOutDate.html("");
        selectedDates = [];
        datepicker.datepicker("option", "maxDate", "");
      }
      datepicker.datepicker("refresh");
      console.log(dString, selectedDates);
    }
  });

});

Array.prototype.unique = function() {
  var a = this.concat();
  for (var i = 0; i < a.length; ++i) {
    for (var j = i + 1; j < a.length; ++j) {
      if (a[i] === a[j])
        a.splice(j--, 1);
    }
  }

  return a;
};

我不经常使用 MomentJS，我需要的一切都可以从 jQuery UI 获得。如果您喜欢使用它，您的选择，只需在需要的地方进行调整。

所以您有几个不同的州需要解决：

无日期 select编辑
一次约会selected
两个日期 selected
重置select离子

用户和脚本需要知道选定的日期，因此我创建了一个数组来包含这些日期。它将包含每个 selected 日期的 Date 对象。这也使得执行日期比较更容易。

在我们的第一个状态中，我们只想禁用 missingDates，因此如果当前 date 匹配，我们将其禁用。我们将知道我们处于第一个状态，因为 selectedDates 将不包含日期，长度将为 0.

在我们的第二个状态中，我们将跳过缺失的日期，因为 maxDate 将被设置。我们知道我们处于第二种状态，因为已经设置了一个日期，我们正在等待下一个 selection。

在我们的第三种状态下，我们有两个日期 selected。我们将要确保突出显示范围。

我们的最终状态，我们假设用户想要重新select日期。

jQuery UI 动态启用日期

jQuery UI enable date dynamically

javascript

jquery

jquery-ui