要按日期对 mat-table 进行排序时，需要确保日期值被正确地解析为 Date 对象，并通过自定义的排序函数来实现排序。以下是一个示例解决方案：

1. 首先，在组件中创建一个数据源，并在其中添加一个用于排序的日期列：

import { Component } from '@angular/core';

export interface UserData {
  name: string;
  date: string;
}

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  dataSource: UserData[] = [
    { name: 'John', date: '2021-01-01' },
    { name: 'Jane', date: '2021-03-15' },
    { name: 'Tom', date: '2020-12-25' },
    // ...
  ];

  sortData(event: any) {
    const data = this.dataSource.slice();
    if (!event.active || event.direction === '') {
      this.dataSource = data;
      return;
    }

    this.dataSource = data.sort((a, b) => {
      const isAsc = event.direction === 'asc';
      switch (event.active) {
        case 'name': return this.compare(a.name, b.name, isAsc);
        case 'date': return this.compare(new Date(a.date), new Date(b.date), isAsc);
        default: return 0;
      }
    });
  }

  compare(a: any, b: any, isAsc: boolean) {
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
  }
}

2. 在 HTML 模板中，使用 mat-table 和 mat-sort-header 来实现排序功能：

  
     Name 
     {{ user.name }} 
  

  
     Date 
     {{ user.date }} 
  

  
  

在上述示例中，sortData 方法用于处理排序事件。它首先复制数据源，然后根据排序的列和方向使用自定义的比较函数进行排序。比较函数将日期字符串转换为 Date 对象，并根据传入的参数（升序或降序）返回排序结果。

使用 matSortChange 事件绑定来监听排序的变化，当排序发生时，调用 sortData 方法进行排序。

请注意，这里假设日期列的值是以字符串形式存储的，并且符合标准的日期格式。如果日期格式不同，需要根据实际情况进行适当的调整。