Filtering by multiple different operators

[app.component.ts] ngOnInit(): void {        this.data = orderDataSource;        this.pageSettings = { pageCount: 5 };        this.filterSettings = { type: 'Menu' };        this.formatoptions = { type: 'date', format: 'M/d/y' };        this.filter = {          ui: {            create: (args) => {              const flValInput: HTMLElement = createElement('input', { className: 'flm-input' });              var vm = this              args.getOptrInstance.dropOptr.element.parentElement.parentElement.style.display =                "none";                var isFiltered = args.target.classList.contains("e-filtered");            // DataRangePicker component              this.dateRangeInstance = new DateRangePicker({                placeholder: "Select a Range",                value: isFiltered ? this.dateValue : null,                change: function (e) {                  if (e.value) {                    vm.dateValue = e.value;              // In dateValue variable we get start date and end date of DataRangePicker component                    vm.grid.filterByColumn(             // here we filter the start date with ‘greaterthanorequal filter operator                      "OrderDate",                      "greaterthanorequal",                      vm.dateValue[0]                    );                  } else {                    this.grid.filterSettings.columns = [];                    this.grid.removeFilteredColsByField(args.target.id);                  }                }              });              args.target.appendChild(flValInput);              this.dateRangeInstance.appendTo(flValInput);            },            write: (args) => {              console.log("filterval:" + args.filteredValue);            },            read: (args) => {             console.log(args);            }          }        };      }      actionBegin(args) {        // Check for filter column        if (          args.requestType === "filtering" &&          args.currentFilteringColumn === "OrderDate"        ) {          // End date value is added as additional filter value with ‘lessthan’ filter operator          args.columns.push({            actualFilterValue: {},            actualOperator: {},            field: "OrderDate",            ignoreAccent: false,            isForeignKey: false,            matchCase: false,            operator: "lessthan",            predicate: "and",            uid: this.grid.getColumnByField(              args.currentFilteringColumn            ).uid,            value: this.dateValue[1]          });        }      };

First of all, thanks for the detailed alternatives. And the "Between" option in the excel type filter is what I need, but in my case, I will not work with the filter UI. I connected an angular grid and an angular tree. When I then click for example a 2020 node in the tree, I want to filter a certain date column and only show the records from 2020 (so between 1/1/2020 and 1/1/2021). This should work with months, days , ... too.  So, is there a way to filter like that "excel between" by code, too?

Thanks again!

Jonas Czeslik

this.grid.filterSettings = {          columns: [{ field: 'OrderDate', matchCase: false, operator: 'greaterthan', predicate: 'and', value: this.startDate },          { field: 'OrderDate', matchCase: false, operator: 'lessthan', predicate: 'and', value: this.endDate }]  };

var customFilter = false;    // You can perform the below function operation in your use case(while selecting a node in the angular tree)  function filterGridValues(e) {              var grid = document.getElementById("Grid").ej2_instances[0];              // Flag variable is used to identify this case in the Grid’s action begin event             this.customFilter = true;              // Filter the required column with start date value              // GridInstance.filterByColumn(Column field name, filter operator, filter value)             this.grid.filterByColumn('OrderDate', 'greaterthan', this.startDate);    }    // Grid’s actionBegin event handler  function onActionBegin(args) {          // Check for filter column and flag enabled          if (args.requestType === "filtering" && args.currentFilteringColumn === "OrderDate" && this.customFilter) {             this.customFilter = false;              // End date value is added as additional filter value with ‘lessthan’ filter operator  and endDate value              args.columns.push({ actualFilterValue: {}, actualOperator: {}, field: "OrderDate", ignoreAccent: false, isForeignKey: false, matchCase: false, operator: "lessthan", predicate: "and", uid: this.grid.getColumnByField(args.currentFilteringColumn).uid, value: this.endDate });          }  }

Hello,

I'm trying to implement this sample: https://stackblitz.com/edit/angular-daterange-filter-hahght?file=app.component.ts 

But it is not working with the latest packages versions, I'm getting the following error:

core.js:5967 ERROR TypeError: Cannot read property 'isDestroyed' of undefined

    at DateFilterUI.destroy (ej2-grids.es2015.js:24979)

    at Observer.notify (ej2-base.es2015.js:2156)

    at GridComponent.notify (ej2-base.es2015.js:7032)

    at FilterMenuRenderer.closeDialog (ej2-grids.es2015.js:25035)

    at Filter.clickHandler (ej2-grids.es2015.js:26573)

    at ZoneDelegate.invokeTask (zone-evergreen.js:399)

    at Object.onInvokeTask (core.js:28269)

    at ZoneDelegate.invokeTask (zone-evergreen.js:398)

    at Zone.runTask (zone-evergreen.js:167)

    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)

If I downgrade Calendar and Grid to 18.2.56 and 18.2.59 it works... Is there a way to make it work with latest versions.

Thank in advance.