如何在DHTMLX Gantt甘特图中实现自定义日期范围筛选功能

1. 修改HTML添加日期筛选下拉组件 #

找到你页面中filters_wrapper容器的代码，新增日期筛选下拉框，修改后代码如下：

<div style='height:20px; padding:5px;'>
    <div class="filters_wrapper" id="filters_wrapper">
        Search Projects:
        <input type="text" name="a12" value="" id="a12" oninput='gantt.$doFilter(this.value)' style="width: 100px;"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        日期筛选:
        <select id="dateFilter" onchange="handleDateFilterChange(this.value)" style="width: 150px;">
            <option value="">全部</option>
            <option value="lastYear">Last Year</option>
            <option value="currentYear">Current Year</option>
            <option value="last6Months">Last 6 Months</option>
            <option value="last2Quarters">Last 2 Quarters</option>
            <option value="nextYear">Next Year</option>
        </select>
    </div>
</div>

2. 新增JS日期范围处理逻辑 #

在你现有JS代码的全局变量区域（比如filterValue变量定义的位置），新增以下代码：

// 存储当前选中的日期范围
let dateRangeStart = null;
let dateRangeEnd = null;

// 根据筛选类型计算对应日期范围
function getDateRangeByType(type) {
    const now = new Date();
    const currentYear = now.getFullYear();
    let start, end;
    switch(type) {
        case 'lastYear':
            start = new Date(currentYear - 1, 0, 1);
            end = new Date(currentYear - 1, 11, 31, 23, 59, 59);
            break;
        case 'currentYear':
            start = new Date(currentYear, 0, 1);
            end = new Date(currentYear, 11, 31, 23, 59, 59);
            break;
        case 'last6Months':
            start = new Date(now);
            start.setMonth(now.getMonth() - 6);
            end = new Date(now, 23, 59, 59);
            break;
        case 'last2Quarters':
            const currentQuarter = Math.floor(now.getMonth() / 3);
            // 计算两个季度前的开始月份
            let startQuarter = currentQuarter - 2;
            let startYear = currentYear;
            if (startQuarter < 0) {
                startQuarter += 4;
                startYear -= 1;
            }
            start = new Date(startYear, startQuarter * 3, 1);
            // 上个季度的最后一天
            end = new Date(currentYear, currentQuarter * 3, 0, 23, 59, 59);
            break;
        case 'nextYear':
            start = new Date(currentYear + 1, 0, 1);
            end = new Date(currentYear + 1, 11, 31, 23, 59, 59);
            break;
        default:
            start = null;
            end = null;
    }
    return {start, end};
}

// 下拉框变化事件处理
function handleDateFilterChange(type) {
    const range = getDateRangeByType(type);
    dateRangeStart = range.start;
    dateRangeEnd = range.end;
    // 重新渲染甘特图触发筛选
    gantt.render();
}

3. 修改原有onBeforeTaskDisplay事件逻辑，合并文本和日期筛选规则 #

你原有代码里的onBeforeTaskDisplay事件存在死代码（return之后的逻辑永远不会执行），替换为以下代码：

gantt.attachEvent("onBeforeTaskDisplay", function(id, task){
    // 先做文本筛选
    if (filterValue) {
        const normalizedText = task.text.toLowerCase();
        const normalizedValue = filterValue.toLowerCase();
        if (normalizedText.indexOf(normalizedValue) === -1) {
            return false;
        }
    }
    // 再做日期筛选
    if (dateRangeStart && dateRangeEnd) {
        // 任务的结束时间 >= 筛选开始时间 且 任务的开始时间 <= 筛选结束时间，即存在时间交集就展示
        const taskEnd = gantt.calculateEndDate(task.start_date, task.duration);
        if (taskEnd < dateRangeStart || task.start_date > dateRangeEnd) {
            return false;
        }
    }
    return true;
});

功能验证 #

修改完成后刷新页面即可测试：选择对应日期筛选选项，甘特图会自动过滤展示时间匹配的任务，同时支持文本搜索和日期筛选叠加使用。

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