如何禁用datepicker中MySQL已存预订日期及历史日期并修复代码故障

核心问题清单 #

后端PHP错误 #

• 变量名拼写错误：PHP中存储禁用日期的数组为$dates_ar，JS输出时错误写为$date_arr，导致前端拿到空值
• 不存在的变量引用：判断查询结果行数时错误使用未定义的$searchResult，实际查询结果对象为$query
• 字段名不匹配：SQL查询的返回字段是date_return，取值时错误写为return_date
• 接收参数不匹配：reservation.php表单提交的参数是id_book、提交方法为post，Book.php错误用$_GET['book']接收
• 数组未提前初始化：未触发查询逻辑时$dates_ar未定义，json_encode会抛出警告
• 存在SQL注入风险：直接将用户输入拼接进SQL语句，未做转义处理

前端JS错误 #

• 缺少依赖库：未引入jQuery和日期选择器对应的JS、CSS资源，是日期选择器无法弹出的直接原因
• 日期格式不匹配：拼接日期字符串时未对月、日补零，导致和后端返回的Y-m-d格式无法匹配（例如后端返回2024-01-05，前端拼接为2024-1-5）
• 缺少历史日期禁用逻辑：未实现用户要求的禁用过去日期的规则
• 日期格式配置错误：jQuery UI datepicker的日期格式配置为dateFormat: 'yy-mm-dd'，错误写为Y-m-d

reservation.php错误 #

• select标签写法错误：多余添加type="text"属性、错误使用自闭和写法
• 第一个option属性错误：value"1"缺少等号，应为value="1"
• 参数传递不匹配：提交的参数名与Book.php接收逻辑不对应

修复后代码 #

reservation.php #

<form action="book.php" method="get" name="a">
    <select id="id_book" name="book">
        <option value="1">ID 1</option>
        <option value="2">ID 2</option>
    </select>
    <input type="submit" name="a" value="提交"/>
</form>

Book.php #

<?php
include("includes/db.php");  
// 提前初始化数组避免未定义警告
$dates_ar = [];
if(isset($_GET['book'])){
    // 转义用户输入防SQL注入
    $id_book = mysqli_real_escape_string($con, $_GET['book']);
    $sql1 = "SELECT date, date_return FROM booking WHERE id_book = '$id_book'";
    $query = $con->query($sql1);
    // 修复不存在的$searchResult变量
    if($query !== false && $query->num_rows > 0) {
        while ($r = $query->fetch_assoc()) {
            $begin = new DateTime($r["date"]);
            // 修复字段名不匹配问题
            $end = new DateTime($r["date_return"]);
            $end = $end->modify('+1 day');
            $interval = new DateInterval('P1D');
            $daterange = new DatePeriod($begin, $interval, $end);
            foreach ($daterange as $date) {
                $dates_ar[] = $date->format("Y-m-d");
            }
        }
    }
}
?>
<!-- 引入日期选择器依赖资源 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<input type="text" name="date" class="form-control" id="date">
<input type="text" name="return_date" class="form-control" id="return_date">

<script type="text/javascript">
$(function() {
    // 修复变量名拼写错误
    var disabledDays = <?php echo json_encode($dates_ar)?>;
    $("#date").datepicker({
        // 修复日期格式配置错误
        dateFormat: 'yy-mm-dd',
        // 直接设置最小日期为今天，自动禁用所有历史日期
        minDate: 0,
        beforeShowDay: function(date) {
            // 对月、日补零，保证格式和后端一致
            const m = String(date.getMonth() + 1).padStart(2, '0'),
                  d = String(date.getDate()).padStart(2, '0'),
                  y = date.getFullYear(),
                  strdate = [y, m, d].join('-');
            if (disabledDays.indexOf(strdate) === -1) {
                return [true, 'ui-state-active', '可预订'];
            }
            return [false, 'ui-state-disabled', '已被预订'];
        }
    });
});
</script>

内容的提问来源于stack exchange，提问作者Hiram