Angular 4-md表中的日期列过滤器不起作用

Question

请帮助我如何过滤md-table中的日期列。

通常，当我在过滤器文本框中输入日期时，不会过滤结果，但对于其他列，过滤器将按预期工作。

下面是stackblitz链接  https://stackblitz.com/edit/angular-pkkvbd

Answer 1

我假设您想按例如。

1. 12/24/2018
2. 12/24
3. 24
4. 2018
5. 以及类似内容-通常按部分日期，以给定的'MM / dd / yyyy'格式

您需要使用所需的日期格式手动过滤数据

  pipe: DatePipe;

  constructor() {
    this.pipe = new DatePipe('en');
    console.log(this.dataSource.filterPredicate);
    const defaultPredicate=this.dataSource.filterPredicate;
    this.dataSource.filterPredicate = (data, filter) =>{
      const formatted=this.pipe.transform(data.created,'MM/dd/yyyy');
      return formatted.indexOf(filter) >= 0 || defaultPredicate(data,filter) ;
    }
  }
  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

https://stackblitz.com/edit/angular-pkkvbd-tpsnrj?file=app%2Ftable-filtering-example.ts

这将按所有列（包括日期列）进行过滤。

如果将格式化的日期（因此字符串）用作日期表示的表模型（数据源）中的数据，则可以避免所有这些情况。它像开箱一样适用于重量列。

Answer 2

表中显示的日期不是实际值。您使用date管道。过滤正在使用原始值。