Filter gantt based on date

[secla]

I was able to follow a tutorial and add a search bar as a filter. https://dhtmlx.com/blog/filter-tasks-javascript-gantt-dhtmlx-video-tutorial/
Now, I would like to add a filter based on dates that the user will input. I added html to input the dates, I would like to grab the dates and used them to filter my gantt.

 <div>
    <h4>Filter</h4>
    <label for="startDate">Start date</label>
    <input type="date" class="k-textbox" id="startDate" />
    <label for="endDate">End date</label>
    <input type="date" class="k-textbox" id="endDate" />
    <button type="button" id="filterSort">Set Filters</button>
  </div>

[Siarhei]

Hi @secla,
In order to implement the date filtering, you should do a few steps:

1. Create HTML inputs to print the data range, like in the code fragment from your post.

2. Get the HTML input’s through the js to be able to get their values, like in this code fragment:

gantt.attachEvent("onDataRender", function(){
start_search_box = document.getElementById("search_start");
end_search_box = document.getElementById("search_end");
});   

3. After that, you will be able to get their values, but to compare it with the task’s dates you should convert their format from the “string” to “date” format.
   The gantt built-in solution to do it is the gantt.date.str_to_date(str) method, which converts a string to the date, this method expects string in the specific format, you can read about this by the following link: https://docs.dhtmlx.com/gantt/desktop__date_operations.html#convertingastringtoadateobject

4. After that, you will be able to compare the task’s date with the converted input’s value, like in this fragment:

function compare_input(id) {
  var match = false; 
    if (gantt.getTask(id).start_date >= strToDate(start_filter_data) && gantt.getTask(id).end_date <= strToDate(end_filter_data))
      match = true;
return match;
}

5. And the last step is to use this “compare” function, to choose which tasks should be displayed or not. The built-in gantt solution for this is the “onBeforTaskDisplay” event, here is a link:
   https://docs.dhtmlx.com/gantt/api__gantt_onbeforetaskdisplay_event.html

Here is an example of how the date filtering could be implemented(click the filter button):
http://snippet.dhtmlx.com/e318a20d6

[secla]

thank you. it helped me.