如何在联系表格 7 WordPress 中的预订系统中根据日期添加不同的时间

Question

我正在开发预订/预订系统，需要使用联系表 7 中的日期选项为预订系统添加不同的时间选项。例如： 从日历来看，如果他们选择的日期是：

周一至周四，预订选项为上午 10 点至晚上 8 点

周五：下午 1 点至晚上 11 点

周六至周日预订选项下午 1 点至晚上 10 点

我的主要计划是从日历中获取日期，并根据日期使用下拉列表和条件字段显示不同的时间。但另一个问题出现了，因为必须需要计时，而我无法根据需要设置每个不同的计时选项。

Answer 1

@Alex 检查我在下面做了什么，您可以稍微调整一下逻辑，但我认为这可以满足您的需求，请告诉我。

此示例使用纯 HTML，但您的联系表单 7 模板将类似于：

<label> Choose Date
[date date-536 id:bookingDate]</label>

<label> Select Time
[select* booking-time id:bookingTime]</label>

[submit "Submit"]

// const
const bookingDateEl = document.getElementById("bookingDate");
const bookingTime = document.getElementById("bookingTime");

// Set all time slots with a min and max params
function setTimeSlots(minTime, maxTime) {
  clearTimeSlots(bookingTime);
  for (var i = minTime; i <= maxTime; i++) {
    // Time slots value
    const timeSlot = i + ":00";

    // Create the current timeslot option element
    var opt = document.createElement("option");

    // Assign Values to option element
    opt.value = timeSlot;
    opt.innerHTML = timeSlot;

    // Append option element to select time.
    bookingTime.appendChild(opt);
  }
}

// Clear Select Time
function clearTimeSlots(selectEl) {
  while (selectEl.options.length > 0) {
    selectEl.remove(0);
  }
}

// Handle when a date is chosen
function bookingDateHandler(event) {
  const bookingDate = new Date(bookingDateEl.value);
  // Get day of the week, 0 for Sunday, 1 for Monday, 2 for Tuesday, and so on
  const bookingDay = bookingDate.getDay();

  if (bookingDay === 0 || bookingDate === 6) {
    setTimeSlots(13, 22);
    return;
  }

  if (bookingDay >= 1 && bookingDay <= 4) {
    setTimeSlots(10, 20);
    return;
  }
  if (bookingDay === 5) {
    setTimeSlots(13, 23);
    return;
  }
}

// Listen to date change
if (bookingDateEl) {
  bookingDateEl.addEventListener("change", bookingDateHandler);
}

<div>
<label for="bookingDate">Select Booking Date </label>
<input type="date" id="bookingDate" />
</div>
<div>
<label for="bookingTime">Select Booking Timme </label>
<select type="date" id="bookingTime">
</select>
</div>