如何根据MySQL数据库值禁用酒店预订系统的jQuery Datepicker

嘿，我来帮你搞定这个问题！开发酒店预订网站时，要根据数据库里的已预订日期禁用jQuery Datepicker的对应日期，咱们可以分两步轻松实现：

首先你需要把数据库中存储的checkin和checkout日期传递到前端JavaScript中。具体实现取决于你的后端语言，这里举几个常见场景的例子：

如果你用PHP： #

从数据库查询到日期后，直接把它们注入到前端JS变量里：

<?php
// 假设通过数据库查询获取到已预订的日期
$booked_checkin = '2024-03-01';
$booked_checkout = '2024-03-05';
?>

<script>
// 将后端日期转为前端可识别的数组
const bookedDates = [
    '<?php echo $booked_checkin; ?>',
    '<?php echo $booked_checkout; ?>'
];
</script>

如果你用Node.js（Express）： #

在渲染页面时把日期作为模板变量传递，比如用EJS模板：

// 后端路由
app.get('/booking', (req, res) => {
    // 假设从数据库查询得到的日期
    const bookedCheckin = '2024-03-01';
    const bookedCheckout = '2024-03-05';
    res.render('booking', { bookedCheckin, bookedCheckout });
});

然后在EJS模板中：

<script>
const bookedDates = ['<%= bookedCheckin %>', '<%= bookedCheckout %>'];
</script>

jQuery Datepicker提供了beforeShowDay方法，它会在渲染每一天时被调用，你可以通过这个方法控制日期是否可选。

禁用单个指定日期（比如仅3月1日和3月5日） #

// 初始化入住日期选择器
$("#checkin").datepicker({
    dateFormat: "yy-mm-dd", // 必须和后端传递的日期格式一致
    beforeShowDay: function(date) {
        // 将当前日期转为和bookedDates一致的字符串格式
        const currentDateStr = $.datepicker.formatDate("yy-mm-dd", date);
        // 检查当前日期是否在已预订列表中
        const isBooked = bookedDates.includes(currentDateStr);
        // 返回数组：[是否可选, 自定义CSS类, 提示文本]
        return [!isBooked, isBooked ? 'ui-state-disabled' : '', isBooked ? '该日期已被预订' : ''];
    }
});

// 初始化退房日期选择器，逻辑和入住一致
$("#checkout").datepicker({
    dateFormat: "yy-mm-dd",
    beforeShowDay: function(date) {
        const currentDateStr = $.datepicker.formatDate("yy-mm-dd", date);
        const isBooked = bookedDates.includes(currentDateStr);
        return [!isBooked, isBooked ? 'ui-state-disabled' : '', isBooked ? '该日期已被预订' : ''];
    }
});

扩展：禁用整个时间段（比如3月1日到3月5日之间的所有日期） #

如果需要禁用的是整个预订区间，而不只是首尾两天，可以修改判断逻辑：

// 先把后端日期转为Date对象
const bookedStart = new Date('2024-03-01');
const bookedEnd = new Date('2024-03-05');

// 在beforeShowDay中判断日期是否在区间内
beforeShowDay: function(date) {
    // 注意：date是Datepicker传递的当前日期对象
    const isInBookedRange = date >= bookedStart && date <= bookedEnd;
    return [!isInBookedRange, isInBookedRange ? 'ui-state-disabled' : '', isInBookedRange ? '该时间段已被预订' : ''];
}

• 日期格式统一：后端传递的日期格式必须和Datepicker的dateFormat设置一致，否则会出现匹配失败的情况。
• 样式自定义：jQuery UI默认会给禁用日期添加ui-state-disabled类，你可以自定义CSS让禁用状态更显眼，比如：

.ui-state-disabled {
    background-color: #ffcccc !important;
    color: #999 !important;
    cursor: not-allowed !important;
}

内容的提问来源于stack exchange，提问作者Joshua C.