禁用已预订的日期时间选择器插槽

Question

我修改了我的 datetimepicker 日历，以便用户可以在一周的 9:00-16:00 之间每小时选择一个日期和时间。

用户可以选择一个 date/time 时段，比如 22-07-2020 在 11:00。然后将其发布到 MySql 数据库，与用户名、电子邮件等一起存储在该数据库中。

我是 datetimepicker 新手，主要在 PHP 开发。我一直在研究阻止或禁用已预订的 date/time 时段的最佳方法（例如 11:00 的 22-07-2020）。

根据我的研究，datetimepicker 没有用于禁用特定 date/time 插槽的内置函数。所以我想知道：

datetimepicker 是我应该使用的最佳工具吗？在我尝试找出解决问题的方法之前。（日期时间选择器似乎经过深思熟虑。）

我已经开始开发一个 PHP 数组，它从数据库中获取所有日期时间数据 table 然后根据用户输入的日期时间进行检查，但是，我承认我可能需要这个JavaScript数组。从逻辑上讲，我希望提醒用户他们选择的日期时间段不是免费的（如果没有禁用特定日期时间的方法）。

所以基本上，除了 datetimepicker 之外还有更好的方法吗？我的逻辑对第 2 点是否公平？

谢谢大家，

强尼

编辑，下面是我的尝试。

//Get dates and times of bookings in database $getAppointments = "SELECT `appointmentID`, `date`, `name`, `email`, `mobile`, `productType`, `appointmentReason`, `reminderText`, `reminderEmail` FROM `appointmentBooker`"; $getAppointmentsResult = mysqli_query($conn, $getAppointments); //get all the bookings from the db.. then store them all in an array - the aim is diasble already booked appointments from the calender using data array.. $appointmentsArray = array(); if (mysqli_num_rows($getAppointmentsResult) > 0){ while ($row = mysqli_fetch_assoc($getAppointmentsResult)) { $dateTime = $row["date"]; array_push($appointmentsArray,$row['date']); } } //Disable dates/times based on array of datetimes

日期选择器代码：

<script> var dateToday = new Date(); var hour = dateToday.getHours(); jQuery(function($) { $("#datepicker").datetimepicker({ //set office hours timeFormat: 'HH:00', hour: hour+1, stepping: 15, beforeShowDay: $.datepicker.noWeekends, minTime: '09:00:00', maxTime: '16:00:00', dateFormat: 'dd-mm-yy', minuteStep: 15, minDate: dateToday }); });

Answer 1

HTML 提供类型为 datetime-local 的标准输入元素。

它提供了为最小值和最大值设置特定日期和时间的可能性。据我了解，您需要的是一个选择器，它可以限制某些日子（如星期一 - 星期五）和某些时间（在 9:00 和 16:00 之间）。

根据您提供的内容（编辑前），我认为默认元素无法管理它，您需要一个 javascript 完全具有该功能集的日期选择器。

建议：与其创建日期选择器，不如呈现可用日期的下拉列表更容易，因为您已经从数据库中提供了它们。

Answer 2

var disabletime = ["07/21/2020:11", "07/21/2020:0", "07/21/2020:17"]; //your dates from database with only hr
function formatDate(datestr)
{
    var date = new Date(datestr);
    var day = date.getDate(); 
    day = day>9?day:"0"+day;
    var month = date.getMonth()+1; month = month>9?month:"0"+month;
    return month+"/"+day+"/"+date.getFullYear();
}

$("input").datetimepicker({
    format: 'DD/MM hh:ii',
    autoclose: true,
    onRenderHour:function(date){
  if(disabletime.indexOf(formatDate(date)+":"+date.getUTCHours())>-1)
    {
        return ['disabled'];
    }
    }
});

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
  <input />

试试这个，它会从 21 日起禁用 11、0 和 17，希望这对你有帮助

禁用已预订的日期时间选择器插槽

Disabling datetimepicker slots that are already booked

javascript

php

jquery

datetimepicker