jQuery Multiple Datepicker问题：切换Hostel后日历禁用日期未正确对应

你当前的核心问题有两个：

• 数据库查询未按Hostel区分闭店日期，把所有Hostel的禁用日期混在了同一数组中
• 所有日历实例共用同一个全局disableDates数组，导致切换Hostel时，日历始终使用同一组禁用日期

1. 调整数据库查询逻辑（按Hostel分组闭店日期） #

假设你的exdate表有hostel_id字段（关联Hostel表的主键），先查询所有Hostel数据，再按Hostel分组整理闭店日期：

<?php
// 查询所有Hostel信息
$hostelsResult = mysqli_query($mysql, "SELECT * FROM `hostels`") or die(mysqli_error($mysql));
$hostels = mysqli_fetch_all($hostelsResult, MYSQLI_ASSOC);

// 查询所有闭店日期并按hostel_id分组
$exdatesResult = mysqli_query($mysql, "SELECT hostel_id, datedisable FROM `exdate`") or die(mysqli_error($mysql));
$exdates = mysqli_fetch_all($exdatesResult, MYSQLI_ASSOC);

// 整理成{hostel_id: [禁用日期数组]}的格式
$hostelDisableDates = [];
foreach ($exdates as $row) {
    $hostelId = $row['hostel_id'];
    if (!isset($hostelDisableDates[$hostelId])) {
        $hostelDisableDates[$hostelId] = [];
    }
    $hostelDisableDates[$hostelId][] = $row['datedisable'];
}
?>

2. 循环渲染Hostel卡片与专属日历 #

给每个日历添加data-hostel-id属性，绑定对应Hostel的标识：

<?php foreach ($hostels as $hostel): ?>
    <!-- Hostel卡片 -->
    <div class="hostel-card" data-hostel-id="<?php echo $hostel['id']; ?>">
        <h3><?php echo $hostel['name']; ?></h3>
        <!-- 此处添加Hostel详情内容 -->
        
        <!-- 对应Hostel的日历（默认隐藏，点击卡片显示） -->
        <div class="hostel-datepicker form-control datepicker" data-hostel-id="<?php echo $hostel['id']; ?>" style="display:none;">
            <input class="form-control" name="appdate_<?php echo $hostel['id']; ?>" type="text" readonly />
        </div>
    </div>
<?php endforeach; ?>

3. 初始化日历并绑定专属禁用日期 #

不再使用全局数组，而是根据日历的data-hostel-id获取对应Hostel的禁用日期：

<script src="assets/js/datepicker/jquery-3.6.1.min.js"></script>
<script>
    // 将PHP分组后的禁用日期转换为JS对象
    var hostelDisableDates = <?php echo json_encode($hostelDisableDates); ?>;

    // 绑定卡片点击事件，切换显示对应日历
    $('.hostel-card').click(function() {
        $('.hostel-datepicker').hide();
        var hostelId = $(this).data('hostel-id');
        $('.hostel-datepicker[data-hostel-id="' + hostelId + '"]').show();
    });

    // 逐个初始化日历
    $(function () {
        $(".datepicker").each(function() {
            var $calendar = $(this);
            var hostelId = $calendar.data('hostel-id');
            // 获取当前Hostel的禁用日期，无数据则为空数组
            var disableDates = hostelDisableDates[hostelId] || [];

            $calendar.datepicker({ 
                autoclose: true,
                todayHighlight: true,
                format: 'dd-mm-yyyy',
                startDate: new Date(),
                daysOfWeekDisabled: [0, 6],
                beforeShowDay: function(date) {
                    // 日期格式需与数据库存储的完全一致
                    var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
                    return disableDates.indexOf(dmy) === -1;
                }
            }).datepicker('update', new Date());
        });
    });
</script>

关键注意事项 #

• 确保exdate表存在hostel_id字段，用于关联闭店日期所属的Hostel
• 日历的显示/隐藏逻辑可根据你的实际UI需求调整
• 日期格式必须与数据库中datedisable字段的格式完全匹配，否则无法正确匹配禁用日期

内容的提问来源于stack exchange，提问作者Ng Pui Sze