PHP从数据库提取日期实现jQuery UI Datepicker指定日期高亮问题

核心问题 #

• *用Date对象作为JS对象的键不可靠：JS对象的键会自动转为字符串，datepicker传入beforeShowDay的date对象和你初始化时创建的date对象，即使日期数值相同，也可能因为时区、时间戳的毫秒级差异导致匹配失败
• *直接循环拼接JS代码容易出现日期格式解析错误，不同浏览器对new Date的解析规则不一致
• *日期格式不统一会直接导致匹配失效

修改方案 #

我们用更稳妥的字符串匹配方式，同时用JSON传递数据避免拼接错误，哪怕你不熟悉JSON也可以直接照搬代码：

第一步：PHP部分调整 #

先在PHP侧把所有符合条件的日期统一转为和你之前静态示例一致的mm/dd/yyyy格式字符串，再用json_encode直接输出给JS：

<?php
$sql = "SELECT * from `table` WHERE `value` > 0";
$result = $connect->query($sql);
$eventDateList = [];
while($row = $result->fetch_assoc()) {
    // 统一格式化日期，如果你数据库的date字段是Y-m-d格式，用下面代码即可
    $date = new DateTime($row['date']);
    $eventDateList[] = $date->format('m/d/Y');
}
?>

第二步：JS部分调整 #

直接读取PHP输出的日期数组，统一用字符串匹配：

<script>
$(function() {
    // 直接接收PHP输出的JSON数组，不需要手动循环拼接代码
    var eventDateList = <?php echo json_encode($eventDateList); ?>;
    // 转为映射表方便快速查找
    var eventDateMap = {};
    eventDateList.forEach(function(dateStr) {
        eventDateMap[dateStr] = true;
    });

    $('#datepicker').datepicker({
        beforeShowDay: function(date) {
            // 把datepicker当前遍历的日期转为和我们存储格式完全一致的字符串
            var currentDate = $.datepicker.formatDate('mm/dd/yy', date);
            if (eventDateMap[currentDate]) {
                return [true, "event", 'Tooltip text'];
            }
            return [true, '', ''];
        }
    });
});
</script>

注意事项 #

• 如果你数据库的date字段存储格式不是标准可直接被DateTime解析的格式，可以用DateTime::createFromFormat指定格式转换，比如存储格式为Ymd的话就写$date = DateTime::createFromFormat('Ymd', $row['date']);
• 确保你已经给.event类写了对应的高亮样式，比如.event { background-color: #f00; color: #fff; }，否则匹配成功也看不到高亮效果

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