DHTMLX 甘特图中的日期范围过滤器答案

【问题标题】：Date Range filters in DHTMLX Gantt chartDHTMLX 甘特图中的日期范围过滤器
【发布时间】：2021-07-27 14:07:19
【问题描述】：

我需要在 DHTMLX 甘特图中显示自定义日期范围过滤器。该过滤器的值如下：

Last Year
Current Year
Last 6 Months
Last 2 Quarters
Next Year

当用户点击任何选项时，图表将被过滤掉。

这是我的 HTML：

<script src="https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js?v=6.0.0"></script>
<link rel="stylesheet" href="https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.css?v=6.0.0">

        
        <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;
                
                
            </div>
        </div>
        <style>
       
        </style>
        <div id="gantt_here" style="width:100%; height:100%;"></div>
        <style type="text/css" media="screen">
            html, body { margin:0px; padding:0px; height:100%; overflow:hidden; }
        </style>

Javascript：

 var tasks = {data:[
    {id:1, text: "Development", start_date: "01-05-2025", duration: 5, "progress": 0.5},
    {id:2, text: "Coding", start_date: "01-05-2025", duration: 2, parent: 1, "progress": 0.5},
    {id:3, text: "Bug fixing", start_date: "12-05-2023", duration: 2, parent: 1, "progress": 0.8},
    {id:4, text: "Feature development", start_date: "05-05-2025", duration: 5, parent: 1, "progress": 0.45}
]}; 


gantt.config.columns = [
    {name: "text", label:"Text" , tree: true, width: 100},
    {name: "start_date", label: "Start time", align: "center",  width: 160} ,
    {name: "end_date", label: "End time", align: "center",  width: 160} ,
  
];

gantt.config.open_tree_initially = true;
        gantt.plugins({ 
            tooltip: true 
        }); 
        var filterValue = "";
        var delay;
        gantt.$doFilter = function(value){
            filterValue = value;
            clearTimeout(delay);
            delay = setTimeout(function(){
                gantt.render();
                gantt.$root.querySelector("[data-text-filter]").focus();
                
            }, 200)
        };
      
        
        var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
        var markerId = gantt.addMarker({  
            start_date: new Date(), 
            css: "today", 
            text: "Now", 
            title: dateToStr(new Date()) 
        });
        gantt.getMarker(markerId); //->{css:"today", text:"Now", id:...}
        
        gantt.attachEvent("onTaskLoading", function(task){
            task.$open = true;
            return true;
        }); 
        
        
        gantt.init("gantt_here");
        gantt.parse(tasks);
      
        gantt.attachEvent("onBeforeTaskDisplay", function(id, task){
            if(!filterValue) return true;
            
            var normalizedText = task.text.toLowerCase();
            var normalizedValue = filterValue.toLowerCase();
            return normalizedText.indexOf(normalizedValue) > -1;
            if (compare_input(id)) {
        return true;
    }
    return false;
        });

谁能告诉我如何在 DHTMLX 甘特图中获取上述自定义日期范围过滤器

【问题讨论】：

标签： javascript html css gantt-chart dhtmlx

【解决方案1】：

要更改显示的日期范围，需要使用gantt.config.start_date 和gantt.config.end_date 参数：

https://docs.dhtmlx.com/gantt/api__gantt_start_date_config.html

这是一个简单的例子：

https://snippet.dhtmlx.com/5/9f6871291

这是带有按钮的 sn-p：

http://snippet.dhtmlx.com/5/ff3649b9d

【讨论】：