Filter by date column in Angular Material table

I want to add a filter for a date column called Delivery Date in an angular material table that I am working on.

I added an input field above the table to filter by Delivery Date and an applyFilter function in typescript but not sure how to apply to just the Delivery Date column only?

html

<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Delivery Date">
</mat-form-field>
</div>


ts

applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
}


I also am not sure what aesthetically looks better to have the filter under the Delivery Date column header or if it should be above the enter table with a header 'Delivery Date' like this example

Full demo Stackblitz Demo

Continue reading...