ag-grid on Angular 2 + date filter not working

Question

I follow the documentation of date filtering here: https://www.ag-grid.com/javascript-grid-filter-date/#gsc.tab=0 However, when I try to filter the date, it just does not work. The result after filtering is the same as before, while other columns such as texts and numbers work. The core problem is supposed to be in the Date object inside gridOptions. I format the date display by Angular date pipe as the same format as filtering format of ag-grid, but the actual date data is something like this: "2017-12-19T08:29:19Z". I don't know whether it affects the filtering method.

Versions: Angular 4+, ag-grid 15.0.0, ag-grid-angular 15.0.0

Here is my code:

import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';    
import { GridOptions, GridApi } from "ag-grid";    
import { ApiService } from '../../services/api.service/api.service';
import * as Models from '../../models/models';    

@Component({
  selector: 'app-orders',
  templateUrl: './orders.component.html',
  styleUrls: ['./orders.component.scss']
})

export class OrdersComponent implements OnInit {

  gridOptions: GridOptions;

  gridApi: GridApi;
  gridColumnApi;

  rowSelection;

  orders: Models.Order[] = [];

  constructor(
    private apiService: ApiService,
    private modalService: NgbModal,
    private datePipe: DatePipe
  ) {
    this.gridOptions = <GridOptions>{};
    this.gridOptions.enableColResize = true;
    this.gridOptions.enableFilter = true;
    this.gridOptions.floatingFilter = true;
    this.gridOptions.enableSorting = true;

    this.gridOptions.columnDefs = [
      { headerName: 'Numero', field: 'id', valueFormatter: this.renderZeroPadding },
      { headerName: 'Date', field: 'order_date', 
        filter: 'agDateColumnFilter', cellRenderer: this.dateCellRenderer.bind(this), filterParams:{

          // provide comparator function
          comparator: function (filterLocalDateAtMidnight, cellValue) {

              var dateParts  = cellValue.split("/");
              var month = Number(dateParts[2]);
              var day = Number(dateParts[1]) - 1;
              var year = Number(dateParts[0]);
              var cellDate = new Date(month, day, year);

              // Now that both parameters are Date objects, we can compare
              if (cellDate < filterLocalDateAtMidnight) {
                  return -1;
              } else if (cellDate > filterLocalDateAtMidnight) {
                  return 1;
              } else {
                  return 0;
              }
          }
      } },
    ];
    // allow single row selection only
    this.rowSelection = "single";
  }

  ngOnInit() {
    // get orders and set the values to grid
    this.apiService.getOrders()
      .subscribe((orders: Models.Order[]) => {
        this.orders = orders;
        this.gridOptions.api.setRowData(orders);
      })
  }

  onReady(params) {
    this.gridApi = params.api;
    const self = this;
    setTimeout(function () { self.gridApi.sizeColumnsToFit(); }, 1000);
  }

  // modify the date to wanted format
  dateCellRenderer(params: any) {
    return this.datePipe.transform(params.value, 'MM/dd/yyyy');
  }

  // add zeros to beginning to make id 8 characters 
  renderZeroPadding(params: any) {
    let pad = "00000000";
    return (pad + params.value).slice(-pad.length)
  }    
}

Answer 1

Try using below comparator:

comparator: function(filterLocalDateAtMidnight, cellValue) {
      //using moment js
      var dateAsString = moment(cellValue).format('DD/MM/YYYY');
      var dateParts = dateAsString.split("/");
      var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

      if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
        return 0
      }

      if (cellDate < filterLocalDateAtMidnight) {
        return -1;
      }

      if (cellDate > filterLocalDateAtMidnight) {
        return 1;
      }
    }

Plunker