PHP5+MySQL对接daterangepicker如何禁用数据库已选中日期

你当前的代码只完成了最基础的控件初始化，既没有对接数据库的已占用日期数据，也没有添加日期合法性校验逻辑，按以下步骤修改即可实现需求：

1. 后端读取已占用日期数据 #

在页面渲染前，从MySQL读取所有有效预订记录的日期。注意如果预订记录存储的是开始/结束日期范围，需要把范围内的所有日期展开为单个日期条目，最终转为JS可直接识别的JSON数组：

<?php
// 替换为你自己的数据库连接配置
mysql_connect('127.0.0.1', '你的数据库账号', '你的数据库密码');
mysql_select_db('你的业务库名');

$occupiedDates = [];
// 替换为你自己的预订表名、有效状态判断逻辑
$query = mysql_query("SELECT start_date, end_date FROM reservations WHERE status = 1");
while ($row = mysql_fetch_assoc($query)) {
    $startTs = strtotime($row['start_date']);
    $endTs = strtotime($row['end_date']);
    // 遍历日期范围内的每一天，加入已占用列表
    for ($ts = $startTs; $ts <= $endTs; $ts += 86400) {
        $occupiedDates[] = date('Y-m-d', $ts);
    }
}
$occupiedDatesJson = json_encode($occupiedDates);
?>

2. 修改daterangepicker初始化配置 #

在原有控件配置中添加isInvalidDate回调，这个回调会在日历渲染每个日期时触发，返回true就会将对应日期置为禁用不可选状态；同时在选择完成回调中增加二次校验，避免用户选中的范围包含禁用日期：

<div class="row">
    <div class="col-xs-3">
        <label class="form-control" style="border:none;">Publish Date</label>
    </div>
    <div class="col-xs-3">
        <input type="text" name="txtPublishDate" id="txtPublishDate" class="form-control" value="<?php echo $PublishDate; ?>" placeholder="Publish Date" />
    </div>
</div>

<script>
$(function() {
    // 直接注入后端读取到的已占用日期数组
    const occupiedList = <?php echo $occupiedDatesJson; ?>;
    $('input[name="txtPublishDate"]').daterangepicker({
        opens: 'right',
        // 日历渲染时判断每个日期是否需要禁用
        isInvalidDate: function(date) {
            return occupiedList.includes(date.format('YYYY-MM-DD'));
        }
    }, function(start, end, label) {
        // 二次校验：遍历选中区间内所有日期，确认无已占用日期
        let checkDate = start.clone();
        let valid = true;
        while (checkDate.isSameOrBefore(end)) {
            if (occupiedList.includes(checkDate.format('YYYY-MM-DD'))) {
                valid = false;
                break;
            }
            checkDate.add(1, 'day');
        }
        if (!valid) {
            alert('所选范围包含已被预订的日期，请重新选择');
            $(this).val('');
            return;
        }
        console.log("选中日期范围: " + start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD'));
    });
});
</script>

常见不生效排查点 #

• 直接查看页面源码，确认occupiedList输出为标准JSON数组，无多余转义、HTML转义字符，如果PHP开启了自动转义需要先做stripslashes处理
• 确认使用的daterangepicker版本在3.0及以上，低版本不支持isInvalidDate配置项
• 保证数据库读取的日期格式统一为YYYY-MM-DD，带时分秒、格式为YYYY/MM/DD都会导致字符串匹配失败
• 开发阶段关闭浏览器缓存、PHP opcache，避免旧代码被缓存导致修改不生效

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