我已经修改了我的datetimepicker日历,以便用户可以在一周的9:00-16:00之间每小时选择一个日期和时间。
用户可以选择一个日期/时段,比如22-07-2020年11:00。 然后将其发布到MySql数据库中,并与用户的姓名,电子邮件等一起存储。
我是datetimepicker的新手,我主要是用PHP开发的。 我一直在研究阻止或禁用已经预定的日期/时段的最佳方法(比如22-07-202011:00)。
根据我的研究,datetimepicker没有内置功能来禁用特定的日期/时间槽。 所以我想知道:
那么基本上,除了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
Datepicker代码:
<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
});
});
HTML提供了类型为datetime-local
的标准输入元素。
它提供了为最小值和最大值设置特定日期和时间的可能性。 正如我所理解的,您需要的是一个选择器,限制某些天(如周一-周五)和某些时间(在9:00和16:00之间)。
从您提供的内容(在编辑之前)来看,我认为缺省元素无法管理该功能,您需要一个具有该功能集的javascript datepicker。
建议:与其创建datepicker,也许呈现可用日期的下拉列表更容易,因为您已经从数据库中提供了这些日期。
null
var dates = ["20/07/2020", "21/07/2020", "22/07/2020", "23/07/2020"]; //your database date come here
function DisableDates(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [dates.indexOf(string) == -1];
}
$(function() {
$("input").datepicker({
beforeShowDay: DisableDates
});
});
<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>
<input>