如何在时段内预订或隐藏 [英] How to make booked or hidden in time slot
本文介绍了如何在时段内预订或隐藏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用这段代码来创建时隙:
<?php如果(isset($ _ GET ['date'])){$ date = $ _GET ['date'];}//使时间段>>第三部分$ duration = 90;$清理= 30;$ start ="10:00";$ end = '24:00';函数时隙($ duration，$ cleanup，$ start，$ end){$ start =新的DateTime($ start);$ end =新的DateTime($ end);$ interval = new DateInterval('PT'.$ duration.'M');$ cleanupinterval = new DateInterval('PT'.$ cleanup.'M');$插槽= array();对于($ intStart = $ start; $ intStart< $ end; $ intStart-> add($ interval)-> add($ cleanupinterval)){$ endperiod =克隆$ intStart;$ endperiod-> add($ interval);如果($ endperiod> $ end){休息;}$ slots [] = $ intStart-> format('H:iA').'-'$ endperiod-> format('H:iA');}返回$ slots；}?><！doctype html>< html lang ="en">< head><元字符集="UTF-8">< meta http-equiv =与X-UA兼容"；content ="ie = edge"<元名称=视口"内容＝宽度＝设备宽度，初始比例＝ 1.0."< title></title>< link rel ="stylesheet"href ="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"完整性="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP + VmmDGMN5t9UJ0Z"crossorigin =匿名"< style>@media only屏幕和(最大宽度:760px)，(最小设备宽度:802px)和(最大设备宽度:1020px){/*强制表不再像表*/桌子，剧情身体，tdtr {显示:块；}.空的 {显示:无；}/*隐藏表格标题(但不显示:无；出于可访问性)*/th {位置:绝对；顶部:-9999px;左:-9999px;}tr {边框:1px实心#ccc；}td {/*表现得像行"；*/边界:无；border-bottom:1px实心#eee;职位:相对左填充:50％；}/*标记数据*/td:nth-of-type(1):之前{内容:周日"；}td:nth-of-type(2):before {内容:星期一"；}td:nth-of-type(3):之前{内容:星期二"；}td:nth-of-type(4):之前{内容:星期三"；}td:nth-of-type(5):之前{内容:星期四"；}td:nth-of-type(6):before {内容:星期五"；}td:nth-of-type(7):before {内容:星期六"；}}/*智能手机(人像和风景)----------- */@仅限纯媒体屏幕，(最小设备宽度:320像素)和(最大设备宽度:480像素){身体 {填充:0;边距:0;}}/* iPad(纵向和横向)----------- */@仅限纯媒体屏幕和(最小设备宽度:802像素)和(最大设备宽度:1020像素){身体 {宽度:495px；}}@media(最小宽度:641px){桌子 {表格布局:固定；}td {宽度:33％;}}.排 {边距顶部:20像素;}.今天 {背景:黄色；}</style></head><身体>< div class =容器">< h1 class =文本中心">预定日期:<?php echo date('m/d/Y'，strtotime($ date));&& lt;/h1>< hr>< div class ="row"><！-第4部分->< div class ="col-md-12"><?php echo isset($ msg)吗?$ msg:'';?></div><！-第3部分-><?php$ timesolts =时隙($ duration，$ cleanup，$ start，$ end)；foreach($ timesolts as $ ts){?>< div class ="col-2">< div class ="form-group">< button class ="btn btn-成功书"data-timeslot ="<?php echo $ ts;?>><?php echo $ ts;?></button></div></div><?php}?></div></div><！-模式部分4->< div id ="myModal"；class =模态淡入"角色=对话"< div class =模态对话框"><！-模态内容->< div class =模态内容">< div class =模式标题">< button type =按钮"；class ="close"data-dismiss =模态"& times;//button< h4 class =模态标题">预订:< span id ="slot">/span</h4></div>< div class =模态主体">< div class ="row">< div class ="col-md-12">< form action =""method ="POST">< div class ="form-group">< label for ="<时隙</label><输入所需类型=文本"；只读名称=时隙"id ="timeslot"class ="form-control"></div>< div class ="form-group">< label for ="服务</label><输入所需类型=文本"；只读名称=服务"id ="service"class ="form-control"></div>< div class ="form-group">< label for =名称">名称</label><输入所需类型=文本"；name =名称"class ="form-control"></div>< div class ="form-group">< label for =电子邮件"> Email</label><输入所需的类型=电子邮件"；name =电子邮件"class ="form-control"></div>< div class ="form-group pull-right"< button class ="btn btn-primary"；type ="submit"名称=提交">提交</button></div></form></div></div></div></div></div></div>< script src =" https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"完整性="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf"crossorigin =匿名"</script>< script>$(function(){使用严格"；$('.book').click(function(){var timeslot = $(this).attr('data-timeslot');$('#slot').html(timeslot);$('#timeslot').val(timeslot);$('#myModal').modal('show');});});</script></body></html> 并使用数据库存储时间，我的表名称是 bookings ，它看起来像这样:预订表
并为我要预订的服务制作了另一个表格，名称为 services ，它看起来像这样:输出
那我该怎么办?
解决方案
您可以在服务表中添加count列，并减少每次预订操作；当等于0时，显示服务已被预订或您可以在预订表中计数service_id的数量，并在服务表中添加max count列，当用户预订服务时，请检查预订表中的service_id的计数是否小于最大计数coulmn
I'm using this piece of code to make time slots:
<?php
if (isset($_GET['date'])) {
$date = $_GET['date'];
}
// Making Timelots >> Part 3
$duration = 90;
$cleanup = 30;
$start = "10:00";
$end = '24:00';
function timeslots($duration, $cleanup, $start, $end)
{
$start = new DateTime($start);
$end = new DateTime($end);
$interval = new DateInterval('PT' . $duration . 'M');
$cleanupinterval = new DateInterval('PT' . $cleanup . 'M');
$slots = array();
for ($intStart = $start; $intStart < $end; $intStart->add($interval)->add($cleanupinterval)) {
$endperiod = clone $intStart;
$endperiod->add($interval);
if ($endperiod > $end) {
break;
}
$slots[] = $intStart->format('H:iA') . '-' . $endperiod->format('H:iA');
}
return $slots;
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<style>
@media only screen and (max-width: 760px),
(min-device-width: 802px) and (max-device-width: 1020px) {
/* Force table to not be like tables anymore */
table,
thead,
tbody,
th,
td,
tr {
display: block;
}
.empty {
display: none;
}
/* Hide table headers (but not display: none;, for accessibility) */
th {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
/*
Label the data
*/
td:nth-of-type(1):before {
content: "Sunday";
}
td:nth-of-type(2):before {
content: "Monday";
}
td:nth-of-type(3):before {
content: "Tuesday";
}
td:nth-of-type(4):before {
content: "Wednesday";
}
td:nth-of-type(5):before {
content: "Thursday";
}
td:nth-of-type(6):before {
content: "Friday";
}
td:nth-of-type(7):before {
content: "Saturday";
}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body {
padding: 0;
margin: 0;
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 802px) and (max-device-width: 1020px) {
body {
width: 495px;
}
}
@media (min-width:641px) {
table {
table-layout: fixed;
}
td {
width: 33%;
}
}
.row {
margin-top: 20px;
}
.today {
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center">Book for Date: <?php echo date('m/d/Y', strtotime($date)); ?></h1>
<hr>
<div class="row">
<!-- part 4 -->
<div class="col-md-12">
<?php echo isset($msg) ? $msg : ''; ?>
</div>
<!-- Part 3 -->
<?php
$timesolts = timeslots($duration, $cleanup, $start, $end);
foreach ($timesolts as $ts) {
?>
<div class="col-2">
<div class="form-group">
<button class="btn btn-success book" data-timeslot="<?php echo $ts; ?>"><?php echo $ts; ?></button>
</div>
</div>
<?php } ?>
</div>
</div>
<!-- Modal Part 4 -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Booking: <span id="slot"></span></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form action="" method="POST">
<div class="form-group">
<label for="">Time Slot</label>
<input required type="text" readonly name="timeslot" id="timeslot" class="form-control">
</div>
<div class="form-group">
<label for="">services</label>
<input required type="text" readonly name="service" id="service" class="form-control">
</div>
<div class="form-group">
<label for="name">Name</label>
<input required type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input required type="email" name="email" class="form-control">
</div>
<div class="form-group pull-right">
<button class="btn btn-primary" type="submit" name="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
<script>
$(function() {
'use strict';
$('.book').click(function() {
var timeslot = $(this).attr('data-timeslot');
$('#slot').html(timeslot);
$('#timeslot').val(timeslot);
$('#myModal').modal('show');
});
});
</script>
</body>
</html>
and using database to store the times in, my table name is bookings and it's looks like this: bookings table
and made another table for services that I want to be booked and it is name is services and it's looks like this: services table
and service_id box in table bookings referring to id box in services.
What I want to make is something like out of stock in ecommerce; I mean that when the service 1 in the table bookings booked for specific time slot, I want to display BOOKED instead of the time slot it self.
for example, I want the out put somthing like this: output
So What shoud I do?
解决方案
You can add count column in service table and decrease every booking operation and when equal 0 show service is booked or You can count number of service_id in booking table and add max count column in service table and when user book the service check if the count number of service_id in booking table is less than the max count coulmn
这篇关于如何在时段内预订或隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
