如何从数据库表获取日期生成数组，禁用日期选择器的已选日期？

方法一：后端直接注入数据（最简单，适合静态页面） #

1. 后端（以PHP为例）查询已预订日期 #

在你的页面代码开头，先添加数据库查询逻辑，获取所有已预订的日期：

<?php
// 替换为你的数据库实际连接信息
$servername = "localhost";
$username = "你的数据库用户名";
$password = "你的数据库密码";
$dbname = "你的数据库名";

// 建立数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 查询tbl_booking表中的fld_booking_date字段，提取纯日期部分
$sql = "SELECT DATE(fld_booking_date) AS booked_date FROM tbl_booking";
$result = $conn->query($sql);

$bookedDates = [];
if ($result->num_rows > 0) {
    // 将查询到的日期存入数组
    while($row = $result->fetch_assoc()) {
        $bookedDates[] = $row["booked_date"];
    }
}
$conn->close();

// 把数组转成JSON格式，方便前端JS读取
$bookedDatesJson = json_encode($bookedDates);
?>

2. 前端注入数据并初始化日期选择器 #

在HTML页面的脚本部分，直接使用后端生成的日期数组替换手动指定的数组：

<div class="form-group">
    <label for="BookingDate">Date</label>
    <input class="form-control datepicker" name="fld_booking_date" id="fld_booking_date" placeholder="mm/dd/yyyy" value="" required>
</div>

<script>
// 直接使用后端生成的已预订日期数组
var array = <?php echo $bookedDatesJson; ?>;

$('input.datepicker').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
    }
});
</script>

方法二：AJAX动态获取数据（适合异步加载场景） #

1. 后端单独接口（get_booked_dates.php） #

创建一个独立的PHP文件，专门返回已预订日期的JSON数据：

<?php
$servername = "localhost";
$username = "你的数据库用户名";
$password = "你的数据库密码";
$dbname = "你的数据库名";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die(json_encode(["error" => "数据库连接失败"]));
}

$sql = "SELECT DATE(fld_booking_date) AS booked_date FROM tbl_booking";
$result = $conn->query($sql);

$bookedDates = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $bookedDates[] = $row["booked_date"];
    }
}
$conn->close();

// 设置返回格式为JSON
header('Content-Type: application/json');
echo json_encode($bookedDates);
?>

2. 前端通过AJAX请求数据并初始化 #

修改JS代码，先异步获取后端数据，再初始化日期选择器：

<div class="form-group">
    <label for="BookingDate">Date</label>
    <input class="form-control datepicker" name="fld_booking_date" id="fld_booking_date" placeholder="mm/dd/yyyy" value="" required>
</div>

<script>
// 异步获取已预订日期
$.ajax({
    url: 'get_booked_dates.php', // 后端接口文件路径
    type: 'GET',
    dataType: 'json',
    success: function(bookedDates) {
        // 成功获取数据后初始化日期选择器
        $('input.datepicker').datepicker({
            beforeShowDay: function(date){
                var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                return [ bookedDates.indexOf(string) == -1 ]
            }
        });
    },
    error: function() {
        // 请求失败时的降级处理，正常初始化日期选择器
        $('input.datepicker').datepicker();
        alert('获取已预订日期失败，请稍后重试');
    }
});
</script>

注意事项 #

• 务必替换代码中所有的数据库连接信息为你自己的实际配置
• 如果fld_booking_date是DATETIME类型，使用DATE(fld_booking_date)可以提取纯日期部分，确保和前端格式一致
• 确保你的页面已经引入了jQuery和jQuery UI的datepicker插件（你的原有代码已经依赖这些）

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