本文将指导你如何使用 jQuery UI Datepicker 组件，结合 PHP 从数据库中获取已预定的日期，并在 Datepicker 中屏蔽这些日期，防止用户选择已被占用的日期。通过优化 PHP 数据格式和 JavaScript 代码，实现高效且易于维护的日期屏蔽功能。
从数据库加载并屏蔽日期
本教程将展示如何从数据库加载已预定的日期，并在 jQuery UI Datepicker 中禁用这些日期，从而防止用户重复预订。我们将分为 PHP 后端数据准备和 JavaScript 前端日期屏蔽两个部分进行讲解。
PHP 后端：准备日期数据
首先，我们需要修改 PHP 脚本，使其返回一个包含已预定日期的简单数组。 这样可以简化 JavaScript 的处理过程。
<?php
$data = array();
$query = "SELECT * FROM events ORDER BY id";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row) {
$data[] = date("d-m-Y", strtotime($row["start_event"]));
}
echo json_encode($data);
?>这段代码从 events 表中查询所有事件，并提取 start_event 字段的日期部分。然后，使用 date("d-m-Y", strtotime($row["start_event"])) 将日期格式化为 dd-mm-yyyy 格式，并将这些日期添加到一个数组中。最后，使用 json_encode() 函数将数组编码为 JSON 格式，以便 JavaScript 可以轻松解析。
注意： 确保 $connect 对象已经正确连接到数据库。
JavaScript 前端：使用 Datepicker 屏蔽日期
接下来，我们将修改 JavaScript 代码，使其在初始化 Datepicker 时，从 load_days.php 获取日期数据，并在 beforeShowDay 回调函数中使用这些数据来禁用日期。
$(function() {
$.ajax({
url: "load_days.php",
type: "POST",
success: function (dates) {
$("#datepicker").datepicker({
minDate: 2,
maxDate: "1w",
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [dates.indexOf(string) === -1];
}
});
},
dataType: "json"
});
});这段代码使用 $.ajax() 函数从 load_days.php 获取日期数据。在 success 回调函数中，我们初始化 Datepicker 组件。beforeShowDay 回调函数会在 Datepicker 显示每一天之前被调用。在这个函数中，我们将日期格式化为 dd-mm-yyyy 格式，并使用 dates.indexOf(string) 检查该日期是否在已预订日期数组中。如果该日期不在数组中（返回 -1），则返回 [true]，表示该日期可以被选择；否则，返回 [false]，表示该日期被禁用。
注意事项：
- minDate 和 maxDate 选项可以用来限制 Datepicker 的可选日期范围。
- dataType: "json" 告诉 jQuery 将响应数据解析为 JSON 格式。
- 确保 jQuery UI 和 Datepicker 插件已经正确引入到页面中。
完整示例
将上述 PHP 代码保存为 load_days.php，并将上述 JavaScript 代码嵌入到 HTML 页面中，确保 jQuery UI 和 Datepicker 插件已正确引入。
<!DOCTYPE html>
<html>
<head>
<title>Datepicker Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$.ajax({
url: "load_days.php",
type: "POST",
success: function (dates) {
$("#datepicker").datepicker({
minDate: 2,
maxDate: "1w",
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [dates.indexOf(string) === -1];
}
});
},
dataType: "json"
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>通过以上步骤，你就可以成功地从数据库加载已预订的日期，并在 jQuery UI Datepicker 中禁用它们，从而避免重复预订。
