如何在jQuery Datepicker中添加单个及多个休假日期？解决同一日期多条休假记录仅显示第一条的问题

问题原因分析 #

你遇到的核心问题是：在beforeShowDay函数的循环中，一旦找到匹配的日期就直接return了，导致同一日期的后续休假记录根本没机会被处理，所以tooltip只能显示第一条的内容。要实现同一日期展示所有休假信息，我们需要先把同日期的记录合并，再返回统一结果。

解决方案步骤 #

1. 重构休假数据结构

首先把你的扁平数组转换成按日期分组的对象，这样可以快速定位某一天的所有休假记录：

var leave_dates= $("#all_past_leave").val();
var leaveGrouped = {}; // 用于按日期分组的容器

if(leave_dates !== null && leave_dates !== '' && leave_dates !== undefined) {
    var leave_all = leave_dates.slice(0,-1);
    var leaveDays = leave_all.split('-');
    
    // 遍历所有休假记录，按日期键分组存储
    leaveDays.forEach(function(item) {
        var leaveData = item.split(',');
        // 构造唯一日期键（格式：年-月-日，和数据里的月份格式保持一致）
        var dateKey = `${leaveData[0]}-${leaveData[1]}-${leaveData[2]}`;
        if(!leaveGrouped[dateKey]) {
            leaveGrouped[dateKey] = [];
        }
        leaveGrouped[dateKey].push(leaveData[3]);
    });
}

2. 修改beforeShowDay函数

现在在日期处理函数中，查找当前日期对应的所有休假记录，把提示文本拼接后返回：

$(function() {
    $("#past_leave").datepicker({
        numberOfMonths:3,
        beforeShowDay: setLeaveDays
    });

    function setLeaveDays(date) {
        // 构造当前日期的匹配键（注意：Date.getMonth()返回0-11，所以要+1匹配数据里的1-12月份）
        var currentDateKey = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        // 检查是否存在该日期的休假记录
        if(leaveGrouped[currentDateKey]) {
            // 用换行符拼接所有休假描述，tooltip会自动换行显示
            var tooltipText = leaveGrouped[currentDateKey].join('\n');
            // 返回允许选择、添加样式、拼接后的提示文本
            return [true, 'staff_leaves', tooltipText];
        }
        // 无休假的日期返回默认状态
        return [true, ''];
    }
});

单个及多个休假日期的正确实现方法 #

单个休假日期

如果是单条记录，数据格式可以简化为"2021,09,28,Love is on Leave"，代码逻辑和上面一致，分组后该日期下只有一条记录，tooltip会正常显示。

多个休假日期（含同日期多条）

• 数据格式建议用-分隔每条记录，每条记录内部用,分隔年、月、日、休假描述（和你当前的格式一致即可）
• 核心逻辑是先按日期分组，再在beforeShowDay中统一处理同日期的所有记录，避免提前return导致遗漏

完整代码示例 #

$(function() {
    var leave_dates= $("#all_past_leave").val();
    var leaveGrouped = {};

    if(leave_dates !== null && leave_dates !== '' && leave_dates !== undefined) {
        var leave_all = leave_dates.slice(0,-1);
        var leaveDays = leave_all.split('-');
        
        leaveDays.forEach(function(item) {
            var leaveData = item.split(',');
            var dateKey = `${leaveData[0]}-${leaveData[1]}-${leaveData[2]}`;
            if(!leaveGrouped[dateKey]) {
                leaveGrouped[dateKey] = [];
            }
            leaveGrouped[dateKey].push(leaveData[3]);
        });
    }

    $("#past_leave").datepicker({
        numberOfMonths:3,
        beforeShowDay: function(date) {
            var currentDateKey = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
            if(leaveGrouped[currentDateKey]) {
                var tooltipText = leaveGrouped[currentDateKey].join('\n');
                return [true, 'staff_leaves', tooltipText];
            }
            return [true, ''];
        }
    });
});

这样修改后，同一日期的所有休假信息会在tooltip里完整展示，和你通过开发者工具修改后的效果一致。

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