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

如何解决DHTMLX 甘特图中的日期范围过滤器

我需要在 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",duration: 2,parent: 1,{id:3,text: "Bug fixing",start_date: "12-05-2023","progress": 0.8},{id:4,text: "Feature development",start_date: "05-05-2025","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",];

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 甘特图中获取上述自定义日期范围过滤器

解决方法

要更改显示的日期范围，您需要使用 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

这是带有按钮的片段：

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