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

【问题标题】：Angular 4 - Filter for date column in md table not workingAngular 4 - 过滤 md 表中的日期列不起作用
【发布时间】：2018-09-05 12:30:11
【问题描述】：

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

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

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

【问题讨论】：

当你说 new Date(2018, 11, 24) 时，实际值是 Mon Dec 24 2018 00:00:00 GMT+0200，所以如果你输入 Mon Dec 24 2018 00:00： 00 GMT+0200 在过滤器中起作用:)
如何处理这种情况，因为我需要使用日期管道

标签： angular

【解决方案1】：

我假设您想按例如过滤。

12/24/2018
12/24
24
2018
和类似的 - 通常，按给定“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

这会按包括日期列在内的所有列进行过滤。

如果您在表格模型（数据源）中使用格式化日期（因此是字符串）而不是日期作为数据，这一切都可以避免。它可以开箱即用，就像它适用于重量列一样。

【讨论】：

感谢您的帮助。我去看看。
嗨 Antonios，实际上我添加的方式与您所说的日期作为字符串表模型相同，但排序不适用于日期列。
你看到我的stackblitz了吗？它在那里工作。不，你没有，你正在使用管道

【解决方案2】：

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

【讨论】：

我需要使用日期管道，如果使用管道我们不能过滤吗？
您可以在没有日期管道的情况下将原始数据更改为这种格式。您还可以尝试制作一个自定义过滤器，根据显示的格式进行过滤（可能在 applyFilter 函数中）。