jQueryUI動態地啟用日期

我正在為一個預訂系統使用jQuery UI datepicker。下面是一個關于它的外觀的例子：

正如你所看到的，第27條被禁用。這意味著，如果用戶在27日之前選擇了入住日期，他應該能夠在27日之前或27日本身選擇退房日期，但不能超過27日：

（禁用日期表示在27日之前選擇了一個入住日期。

（一個禁用的日期意味著它可以接受退房，但不能接受入住）

（一個禁用的日期意味著它可以接受退房，但不能接受入住）。

我正在動態地設定maxDate，以便用戶不能選擇超過這個日期的退房日期：

$("#datepicker"/span>)。 datepicker('option', 'maxDate', minDate.toDate() 。)

現在maxDate是在27號，但由于它在初始化時被禁用，用戶不能選擇它作為退房日期。因此，我想實作的是，如果用戶在27日之前選擇了一個入住日期，則啟用27日，如果用戶取消選擇入住日期，則將其禁用。

這里有一個JSFiddle來說明這個問題。

uj5u.com熱心網友回復：

考慮以下內容：

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

JavaScript

$(function(/span>) {

  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"/span>, 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(""/span>)。
        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中獲得。如果你喜歡使用它，你可以選擇，只需在需要的地方進行調整。

因此，你有幾個不同的國家需要解決：

用戶和腳本將需要知道所選日期，所以我創建了一個陣列來包含這些日期。它將包含每個選定日期的Date物件。這也使得執行日期比較變得更加容易。

在我們的第一個狀態中，我們希望只禁用missingDates，所以如果當前date是匹配的，我們就禁用它。我們將知道我們處于第一個狀態，因為selectedDates將不包含任何日期，長度將是0。

在我們的第二個狀態中，我們將跳過缺少的日期，因為maxDate將被設定。我們知道我們處于第二種狀態，因為一個日期已經被設定，我們正在等待下一個選擇。

在我們的第三狀態中，我們已經選擇了兩個日期。我們要確保突出顯示該范圍。

我們的最后狀態是，我們有兩個日期被選中。

我們的最后狀態，我們假設用戶想要重新選擇日期。

標籤：

上一篇：如何更新MongoDB中的子陣列專案,JavaScript

下一篇：如何在django中建立端點視圖以獲得自動完成的查詢集？