Angular 4 - Filter for date column in md table not working

Question

Could you please help me how to filter the date column in md-table.

Usually when i enter the date in filter text box, the result is not filtered, but for other columns filter is working as expected.

Below is the stackblitz link https://stackblitz.com/edit/angular-pkkvbd

Answer 1

I assume you want to filter by eg.

1. 12/24/2018
2. 12/24
3. 24
4. 2018
5. and similar - in general, by partial date with given 'MM/dd/yyyy' format

You need to manually filter the data using required date format

  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

This filters by all columns including date column.

This all could be avoided if you would use formatted date (thus string) as data in your table model (datasource) insteed of date. It would work out of the box like it works for weight column.

Answer 2

The date shown in the table is not the actual value. You use the date pipe. The filtering is working with the original value.