How to add different timing based on the day it is for a Reservation system in Contact Form 7 WordPress

Question

I am working on a booking/reservation system and need to add different timing options on the days for a booking system using date option in contact form 7. for example: From the calendar, if the day they picked is:

Mon-Thurs, the booking option is 10am-8pm

Friday: 1pm-11pm

Sat-Sun booking option 1pm-10pm

My main plan was to get the day from the calendar and based on the day display different timings using dropdown and conditional fields. But another problem arises since the timing must be required and I can't set each of the different timing options as required.

Answer 1

@Alex check what I did below, you can adjust the logic a bit, but I think that can work for what you looking for, let me know.

This example is with plain HTML, but your contact form 7 template will be something like:

<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();

  //Saturday and Sunday
  if (bookingDay === 0 || bookingDay === 6) {
    setTimeSlots(13, 22);
    return;
  }
  // Monday to Thursday
  if (bookingDay >= 1 && bookingDay <= 4) {
    setTimeSlots(10, 20);
    return;
  }
  
  // Friday
  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>