将特定日期和时间的数据从模型传递到 js
Pass data from the model to js for a specific day and time
我有一个模型，我们可以在其中选择机构在一周中的每一天的开放时间，从某某到某某，例如Monday 12:00 AM - 11:30 PM
<?php
namespace common\models;
use yii\behaviors\TimestampBehavior;
use yii\db\ActiveRecord;
use yii\db\Expression;
class WorkHours extends _source_WorkHours
{
public const WEEK_DAY_MON = 'Mon';
public const WEEK_DAY_TUE = 'Tue';
public const WEEK_DAY_WED = 'Wed';
public const WEEK_DAY_THU = 'Thu';
public const WEEK_DAY_FRI = 'Fri';
public const WEEK_DAY_SAT = 'Sat';
public const WEEK_DAY_SUN = 'Sun';
/**
* {@inheritdoc}
*/
public function behaviors(): array
{
return [
'timestamp' => [
'class' => TimestampBehavior::class,
'attributes' => [
ActiveRecord::EVENT_BEFORE_INSERT => ['created_at'],
],
'value' => new Expression('NOW()'),
],
];
}
public static function weekDays(): array
{
return [
self::WEEK_DAY_MON => 'Monday',
self::WEEK_DAY_TUE => 'Tuesday',
self::WEEK_DAY_WED => 'Wednesday',
self::WEEK_DAY_THU => 'Thursday',
self::WEEK_DAY_FRI => 'Friday',
self::WEEK_DAY_SAT => 'Saturday',
self::WEEK_DAY_SUN => 'Sunday',
];
}
public static function getWeekDay(string $val): string
{
$ar = self::weekDays();
return $ar[$val] ?? $val;
}
public static function hoursList(): array
{
$list = [];
for ($i = 0; $i < 24; $i++) {
$A = 'AM';
$n = $i;
if ($i >= 12) {
$A = 'PM';
$n = $i - 12;
}
$n = $n < 10 ? '0' . $n : $n;
$_A = ($i === 12 ? 'AM' : $A);
$list[$i . '.00'] = $n . '.00 ' . ($i === 0 ? 'PM' : $_A);
$list[$i . '.30'] = $n . '.30 ' . $A;
}
return $list;
}
}
接下来，使用脚本，我们传递所有这些字段，最后我们可以select任何一天，任何时间，从00:00 PM到11:30 PM
$this->registerJsFile('/js/restaurant-reserve.js', ['depends' => [JqueryAsset::class]]);
$this->registerJs('restaurantReserve.init()');
<a class="btn btn-fourth <?= $restaurantReservationForm->getErrors('date') ? 'btn-error' : '' ?>" id="reservation-date" data-date="<?= $restaurantReservationForm->getDate()
? $restaurantReservationForm->getDate()->format('m/d/Y') : '' ?>>">
<span class="icon br-calender"></span> <span class="js-value">
<?= $restaurantReservationForm->date
? (new DateTime($restaurantReservationForm->date))->format('d M') : '-- ---' ?>
</span>
</a>
<a class="btn btn-fourth <?= $restaurantReservationForm->getErrors('time') ? 'btn-error' : '' ?>" id="reservation-time" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="icon br-clock"></span> <span class="js-value">
<?= $restaurantReservationForm->time
? WorkHours::hoursList()[$restaurantReservationForm->time] : '-- : --' ?>
</span>
</a>
<ul class="dropdown-menu dropdown-menu-height-fixed" aria-labelledby="reservation-time">
<?php foreach (WorkHours::hoursList() as $k => $v) { ?>
<li>
<a class="dropdown-item <?= $restaurantReservationForm->time === $k ? 'active' : ''
?>" href="#" data-value="<?= $k ?>">
<?= $v ?>
</a>
</li>
<?php } ?>
</ul>
这是脚本
let restaurantReserve = {
init: function () {
let _self = this;
$('#reservation-date').datepicker({startDate: '+0d'}).on('changeDate', function (e) {
const arDate = e.date.toString().split(' ');
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());
});
$('[aria-labelledby="reservation-person"] li a').click(function () {
$(this).closest('ul').find('a').removeClass('active');
$(this).addClass('active');
let input = $('[name="RestaurantReservationForm[personCount]"]');
input.val($(this).data('value'));
_self.unSetError(input);
$('#reservation-person .js-value').text($(this).data('value'));
});
},
setError: function (ob) {
$('#' + ob.data('btnId')).addClass('btn-error');
},
unSetError: function (ob) {
$('#' + ob.data('btnId')).removeClass('btn-error');
}
}
我有不同的机构，每个机构都有自己的工作时间。我需要在特定的一天为特定的机构选择时间。假设 Monday 上的一个机构的工作时间是从 9:30 AM 到 2.30 PM，因此 select 应该只能在这个区间内选择时间。
我想做什么
首先，通过json
将数据从数据库传递到初始化函数
$this->registerJs('restaurantReserve.init('. Json::encode($restaurant->workHours) .')');
因此，我们将数据以带有数据库的数组形式传递给脚本[{"id":"1","restaurant_id":"1","day":"Mon","open":"9.30","close":"14.30","created_at":"2022-02-15 05:00:57"}]
这是插件，我有必要的数据，剩下的只是添加脚本，以便每天从该数据中获取一个时间间隔
我需要另一个功能，例如
restaurantDate: function (e) {
...
}
但是里面是做什么的，我还是不太明白
这里是一切应该是什么样子的片段，现在你可以在这里选择任何时间，但我需要为将从 json
传输的每一天设置一个时间间隔
let restaurantReserve = {
init: function () {
let _self = this;
$('#reservation-date').datepicker({startDate: '+0d'}).on('changeDate', function (e) {
const arDate = e.date.toString().split(' ');
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();
.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;
}
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>
<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>
[{"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":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"}]
由于您的代码不是可重现该行为的可运行代码段，因此我不会提供完整的解决方案，而是提供解决问题的方法。你的 JSON 的
[{"id":"1","restaurant_id":"1","day":"Mon","open":"9.30","close":"14.30","created_at":"2022-02-15 05:00:57"}]
有一个restaurant_id和一个day。因此，让我们定义一个函数来查找餐厅所有日期的所有时间：
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);
}
使用这些函数你可以获得你需要的数据。根据该数据，您可以按照需要的方式填写 HTML。如果您需要更多信息，请提供您的问题的最小可重现示例、JSON 输入、您当前的 HTML 以及基于 JSON 输入您想要的 HTML .然后我可以将其应用于您的结构。但是，为了这样做，我需要更多的信息。
编辑
根据我们在评论部分的讨论，我收到了足够的信息来解决问题：
let restaurantReserve = {
init: function () {
let _self = this;
$('#reservation-date').datepicker({startDate: '+0d'}).on('changeDate', function (e) {
const arDate = e.date.toString().split(' ');
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>
我有一个模型，我们可以在其中选择机构在一周中的每一天的开放时间，从某某到某某，例如Monday 12:00 AM - 11:30 PM
<?php
namespace common\models;
use yii\behaviors\TimestampBehavior;
use yii\db\ActiveRecord;
use yii\db\Expression;
class WorkHours extends _source_WorkHours
{
public const WEEK_DAY_MON = 'Mon';
public const WEEK_DAY_TUE = 'Tue';
public const WEEK_DAY_WED = 'Wed';
public const WEEK_DAY_THU = 'Thu';
public const WEEK_DAY_FRI = 'Fri';
public const WEEK_DAY_SAT = 'Sat';
public const WEEK_DAY_SUN = 'Sun';
/**
* {@inheritdoc}
*/
public function behaviors(): array
{
return [
'timestamp' => [
'class' => TimestampBehavior::class,
'attributes' => [
ActiveRecord::EVENT_BEFORE_INSERT => ['created_at'],
],
'value' => new Expression('NOW()'),
],
];
}
public static function weekDays(): array
{
return [
self::WEEK_DAY_MON => 'Monday',
self::WEEK_DAY_TUE => 'Tuesday',
self::WEEK_DAY_WED => 'Wednesday',
self::WEEK_DAY_THU => 'Thursday',
self::WEEK_DAY_FRI => 'Friday',
self::WEEK_DAY_SAT => 'Saturday',
self::WEEK_DAY_SUN => 'Sunday',
];
}
public static function getWeekDay(string $val): string
{
$ar = self::weekDays();
return $ar[$val] ?? $val;
}
public static function hoursList(): array
{
$list = [];
for ($i = 0; $i < 24; $i++) {
$A = 'AM';
$n = $i;
if ($i >= 12) {
$A = 'PM';
$n = $i - 12;
}
$n = $n < 10 ? '0' . $n : $n;
$_A = ($i === 12 ? 'AM' : $A);
$list[$i . '.00'] = $n . '.00 ' . ($i === 0 ? 'PM' : $_A);
$list[$i . '.30'] = $n . '.30 ' . $A;
}
return $list;
}
}
接下来，使用脚本，我们传递所有这些字段，最后我们可以select任何一天，任何时间，从00:00 PM到11:30 PM
$this->registerJsFile('/js/restaurant-reserve.js', ['depends' => [JqueryAsset::class]]);
$this->registerJs('restaurantReserve.init()');
<a class="btn btn-fourth <?= $restaurantReservationForm->getErrors('date') ? 'btn-error' : '' ?>" id="reservation-date" data-date="<?= $restaurantReservationForm->getDate()
? $restaurantReservationForm->getDate()->format('m/d/Y') : '' ?>>">
<span class="icon br-calender"></span> <span class="js-value">
<?= $restaurantReservationForm->date
? (new DateTime($restaurantReservationForm->date))->format('d M') : '-- ---' ?>
</span>
</a>
<a class="btn btn-fourth <?= $restaurantReservationForm->getErrors('time') ? 'btn-error' : '' ?>" id="reservation-time" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="icon br-clock"></span> <span class="js-value">
<?= $restaurantReservationForm->time
? WorkHours::hoursList()[$restaurantReservationForm->time] : '-- : --' ?>
</span>
</a>
<ul class="dropdown-menu dropdown-menu-height-fixed" aria-labelledby="reservation-time">
<?php foreach (WorkHours::hoursList() as $k => $v) { ?>
<li>
<a class="dropdown-item <?= $restaurantReservationForm->time === $k ? 'active' : ''
?>" href="#" data-value="<?= $k ?>">
<?= $v ?>
</a>
</li>
<?php } ?>
</ul>
这是脚本
let restaurantReserve = {
init: function () {
let _self = this;
$('#reservation-date').datepicker({startDate: '+0d'}).on('changeDate', function (e) {
const arDate = e.date.toString().split(' ');
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());
});
$('[aria-labelledby="reservation-person"] li a').click(function () {
$(this).closest('ul').find('a').removeClass('active');
$(this).addClass('active');
let input = $('[name="RestaurantReservationForm[personCount]"]');
input.val($(this).data('value'));
_self.unSetError(input);
$('#reservation-person .js-value').text($(this).data('value'));
});
},
setError: function (ob) {
$('#' + ob.data('btnId')).addClass('btn-error');
},
unSetError: function (ob) {
$('#' + ob.data('btnId')).removeClass('btn-error');
}
}
我有不同的机构，每个机构都有自己的工作时间。我需要在特定的一天为特定的机构选择时间。假设 Monday 上的一个机构的工作时间是从 9:30 AM 到 2.30 PM，因此 select 应该只能在这个区间内选择时间。
我想做什么
首先，通过json
将数据从数据库传递到初始化函数$this->registerJs('restaurantReserve.init('. Json::encode($restaurant->workHours) .')');
因此，我们将数据以带有数据库的数组形式传递给脚本[{"id":"1","restaurant_id":"1","day":"Mon","open":"9.30","close":"14.30","created_at":"2022-02-15 05:00:57"}]
这是插件，我有必要的数据，剩下的只是添加脚本，以便每天从该数据中获取一个时间间隔
我需要另一个功能，例如
restaurantDate: function (e) {
...
}
但是里面是做什么的，我还是不太明白
这里是一切应该是什么样子的片段，现在你可以在这里选择任何时间，但我需要为将从 json
传输的每一天设置一个时间间隔let restaurantReserve = {
init: function () {
let _self = this;
$('#reservation-date').datepicker({startDate: '+0d'}).on('changeDate', function (e) {
const arDate = e.date.toString().split(' ');
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();
.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;
}
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>
<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>
[{"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":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"}]
由于您的代码不是可重现该行为的可运行代码段，因此我不会提供完整的解决方案，而是提供解决问题的方法。你的 JSON 的
[{"id":"1","restaurant_id":"1","day":"Mon","open":"9.30","close":"14.30","created_at":"2022-02-15 05:00:57"}]
有一个restaurant_id和一个day。因此，让我们定义一个函数来查找餐厅所有日期的所有时间：
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);
}
使用这些函数你可以获得你需要的数据。根据该数据，您可以按照需要的方式填写 HTML。如果您需要更多信息，请提供您的问题的最小可重现示例、JSON 输入、您当前的 HTML 以及基于 JSON 输入您想要的 HTML .然后我可以将其应用于您的结构。但是，为了这样做，我需要更多的信息。
编辑
根据我们在评论部分的讨论，我收到了足够的信息来解决问题：
let restaurantReserve = {
init: function () {
let _self = this;
$('#reservation-date').datepicker({startDate: '+0d'}).on('changeDate', function (e) {
const arDate = e.date.toString().split(' ');
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>