Angular 2 + 日期过滤器上的 ag-grid 不起作用

Question

我在这里遵循日期过滤的文档： https://www.ag-grid.com/javascript-grid-filter-date/#gsc.tab=0 但是，当我尝试过滤日期时，它不起作用。过滤后的结果和以前一样，而其他列，如文本和数字都可以。核心问题应该出在gridOptions 内的Date 对象中。我将 Angular 日期管道的日期显示格式化为与 ag-grid 的过滤格式相同的格式，但实际的日期数据是这样的： “2017-12-19T08:29:19Z”。不知道会不会影响过滤方式。

版本：Angular 4+、ag-grid 15.0.0、ag-grid-angular 15.0.0

这是我的代码：

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

尝试使用以下比较器：

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

Answer 2

添加过滤器：'agDateColumnFilter'

{
    headerName: Date,
    filter:'agDateColumnFilter',
    valueFormatter: function(params){
       return moment(param.value).format('MM/DD/YYY');
    }
}

Answer 3

基于 shoaib 的回答和参考https://blog.ag-grid.com/valueformatters-part-2/。

当您的日期格式为“2017-12-19T08:29:19Z”时，您必须转换为日期对象，例如“Thursday 24 Jun 2021 00:00:00 GMT+0700（印度尼西亚西部时间）”在filterParams->比较器中。

这里是sn-p的代码如何用moment js做到这一点

filterParams={{
  buttons: ["reset"],
  comparator: (filterLocalDateAtMidnight, cellValue) => {
    const cellDate = moment(cellValue).startOf("day").toDate();

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

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

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

如你所见，为什么我将时间设置为 0？那是因为如果您的日期格式具有像“05:20:27”这样的时间，然后您将其与为 0 的 filterLocalDateAtMidnight.getTime() 进行比较，则它不会比较任何内容。因此，您必须将小时更改为 0。