[Solved] The choice of the day is not through the select, but through the calendar

by


If I clearly understand you, then you need just add $('#dayofweek').val(arDate[0]); after this line const arDate = e.date.toString().split(' ');. Here is an example:

let restaurantReserve = {
  init: function() {
    let _self = this;

    $('#reservation-date').datepicker({
      startDate: '+0d'
    }).on('changeDate', function(e) {
      const arDate = e.date.toString().split(' ');
      $('#dayofweek').val(arDate[0]);
      filterTimes();
      let input = $('[name="RestaurantReservationForm[date]"]');
      input.val(arDate[3] + '-' + (e.date.getMonth() + 1) + '-' + arDate[2]);
      _self.unSetError(input);
      $('#reservation-date .js-value').text(arDate[2] + ' ' + arDate[1]);
    });

    $('[aria-labelledby="reservation-time"] li a').click(function() {
      $(this).closest('ul').find('a').removeClass('active');
      $(this).addClass('active');
      let input = $('[name="RestaurantReservationForm[time]"]');
      input.val($(this).data('value'));
      _self.unSetError(input);
      $('#reservation-time .js-value').text($(this).text());
    });
  },
  setError: function(ob) {
    $('#' + ob.data('btnId')).addClass('btn-error');
  },
  unSetError: function(ob) {
    $('#' + ob.data('btnId')).removeClass('btn-error');
  }
}
restaurantReserve.init();
let json = [{
  "id": 86,
  "restaurant_id": 1,
  "day": "Mon",
  "open": "9.30",
  "close": "14.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 87,
  "restaurant_id": 1,
  "day": "Tue",
  "open": "3.00",
  "close": "21.00",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 88,
  "restaurant_id": 1,
  "day": "Wed",
  "open": "4.30",
  "close": "6.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 89,
  "restaurant_id": 1,
  "day": "Thu",
  "open": "2.30",
  "close": "7.00",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 90,
  "restaurant_id": 1,
  "day": "Fri",
  "open": "3.00",
  "close": "22.00",
  "created_at": "2022-02-22 10:56:15"
}, /*{"id":91,"restaurant_id":1,"day":"Sat","open":"1.30","close":"4.30","created_at":"2022-02-22 10:56:15"},*/ {
  "id": 91,
  "restaurant_id": 1,
  "day": "Sat",
  "open": "0",
  "close": "4.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 92,
  "restaurant_id": 1,
  "day": "Sun",
  "open": "3.00",
  "close": "20.30",
  "created_at": "2022-02-22 10:56:15"
}, {
  "id": 107,
  "restaurant_id": 3,
  "day": "Mon",
  "open": "1.30",
  "close": "19.00",
  "created_at": "2022-02-22 10:58:59"
}, {
  "id": 108,
  "restaurant_id": 3,
  "day": "Tue",
  "open": "5.30",
  "close": "8.00",
  "created_at": "2022-02-22 10:58:59"
}, {
  "id": 109,
  "restaurant_id": 3,
  "day": "Wed",
  "open": "3.00",
  "close": "20.30",
  "created_at": "2022-02-22 10:58:59"
}, {
  "id": 110,
  "restaurant_id": 3,
  "day": "Thu",
  "open": "1.00",
  "close": "12.30",
  "created_at": "2022-02-22 10:58:59"
}, {
  "id": 111,
  "restaurant_id": 3,
  "day": "Fri",
  "open": "2.30",
  "close": "12.30",
  "created_at": "2022-02-22 10:58:59"
}, {
  "id": 112,
  "restaurant_id": 3,
  "day": "Sat",
  "open": "4.00",
  "close": "22.00",
  "created_at": "2022-02-22 10:58:59"
}, {
  "id": 113,
  "restaurant_id": 3,
  "day": "Sun",
  "open": "4.00",
  "close": "22.30",
  "created_at": "2022-02-22 10:58:59"
}];

function getWorkHours(json, restaurant_id) {
  return json.filter(item => item.restaurant_id == restaurant_id);
}

function getWorkHoursForDay(json, restaurant_id, day) {
  return getWorkHours(json, restaurant_id).filter(item => item.day === day)[0];
}

function filterTimes() {
  let restaurantID = document.getElementById("restaurantid").value;
  let dayofweek = document.getElementById("dayofweek").value;
  if ((["1", "3"].indexOf(restaurantID) >= 0) && ((["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].indexOf(dayofweek)) >= 0)) {
    let workHours = getWorkHoursForDay(json, restaurantID, dayofweek);
    let items = document.querySelectorAll(".dropdown-menu.dropdown-menu-height-fixed li a");
    for (let item of items) {
      let itemValueParts = item.innerText.split(" ");
      itemValue = parseFloat(itemValueParts[0]) + (((itemValueParts[1] === "PM") && (itemValueParts[0] !== "00.00")) ? 12 : 0);
      item.parentNode.classList[((itemValue < parseFloat(workHours.open)) || (itemValue > parseFloat(workHours.close)) ? "add" : "remove")]("invisible");
    }
  }
}
.btn {
  border: none;
  border-radius: 8px;
  height: 40px;
  padding: 10px 15px;
  font-weight: 800;
  font-size: 14px;
  margin-right: 10px;
  cursor: pointer;
}

.btn-fourth {
  text-decoration: none;
  background: #e3e5e8;
  color: #747b8b;
}

.invisible {
  display: none;
}

ul.with-out>li:before,
.dropdown-menu li:before,
ul.whithout>li:before {
  display: none;
}

.dropdown-menu li {
  padding: 0;
}

.dropdown-menu-height-fixed {
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-item.active,
.dropdown-item:active {
  background: red;
}

.block-shadow {
  box-shadow: 0 2px 8px 0 rgba(32, 35, 44, 0.05);
}

.block-white {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<form id="reservation" action="/restaurants/123/" method="post">
  <div class="block-shadow block-white mb-4">
    <h5 class="fw-bold mb-3">Reserve a table</h5>
    <div class="btn-s">
      <a class="btn btn-fourth " id="reservation-date" data-date=">">
        <span class="icon br-calender"></span> <span class="js-value">-----</span>
      </a>
      <a class="btn btn-fourth " id="reservation-time" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="icon br-clock"></span> <span class="js-value">
                        -- : --                </span>
      </a>
      <select id="restaurantid" onchange="filterTimes()">
        <option>Please Select Restaurant</option>
        <option value="1">Pizza Mia</option>
        <option value="3">Burger Land</option>
      </select>
      <select id="dayofweek" onchange="filterTimes()">
        <option>Please Select Day</option>
        <option value="Mon">Mon</option>
        <option value="Tue">Tue</option>
        <option value="Wed">Wed</option>
        <option value="Thu">Thu</option>
        <option value="Fri">Fri</option>
        <option value="Sat">Sat</option>
        <option value="Sun">Sun</option>
      </select>
      <ul class="dropdown-menu dropdown-menu-height-fixed" aria-labelledby="reservation-time">
        <li><a class="dropdown-item " href="#" data-value="0.00">00.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="0.30">00.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="1.00">01.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="1.30">01.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="2.00">02.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="2.30">02.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="3.00">03.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="3.30">03.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="4.00">04.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="4.30">04.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="5.00">05.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="5.30">05.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="6.00">06.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="6.30">06.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="7.00">07.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="7.30">07.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="8.00">08.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="8.30">08.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="9.00">09.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="9.30">09.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="10.00">10.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="10.30">10.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="11.00">11.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="11.30">11.30 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="12.00">00.00 AM</a></li>
        <li><a class="dropdown-item " href="#" data-value="12.30">00.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="13.00">01.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="13.30">01.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="14.00">02.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="14.30">02.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="15.00">03.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="15.30">03.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="16.00">04.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="16.30">04.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="17.00">05.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="17.30">05.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="18.00">06.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="18.30">06.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="19.00">07.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="19.30">07.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="20.00">08.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="20.30">08.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="21.00">09.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="21.30">09.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="22.00">10.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="22.30">10.30 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="23.00">11.00 PM</a></li>
        <li><a class="dropdown-item " href="#" data-value="23.30">11.30 PM</a></li>
      </ul>
    </div>
    <div class="form-group field-restaurantreservationform-personcount">
      <input type="hidden" id="restaurantreservationform-personcount" class="form-control" name="RestaurantReservationForm[personCount]" data-btn-id="reservation-person">
    </div>
    <div class="form-group field-restaurantreservationform-date required">
      <input type="hidden" id="restaurantreservationform-date" class="form-control" name="RestaurantReservationForm[date]" data-btn-id="reservation-date">
    </div>
    <div class="form-group field-restaurantreservationform-time">
      <input type="hidden" id="restaurantreservationform-time" class="form-control" name="RestaurantReservationForm[time]" data-btn-id="reservation-time">
    </div>

2

solved The choice of the day is not through the select, but through the calendar