angular - 如何自定义 mat-calendar-header 以添加时间选择器

Question

我正在尝试将时间选择器添加到 mat 日期选择器。我尝试使用 mat-calendar-header 但 UI 发生了变化。有没有办法做到这一点。

HTML 文件：

<mat-form-field>
<mat-label>Date :</mat-label>                                 
 <input #ref matInput [matDatepicker]="startDate" (click)="startDate.open() 
      formControlName="reportOn" (dateChange)="checkDate()" readonly>
 <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle> 
 <mat-datepicker #startDate [calendarHeaderComponent]="customHeader"></mat-datepicker>

自定义头文件：

<mat-calendar-header #header>
  <button mat-button type="button" (click)="todayClicked()">Today
  </button>  
</mat-calendar-header>
<div class="mat-calendar-footer">
   <mat-label>Time :</mat-label>
   <mat-select> 
     <mat-option> 1 </mat-option>
     <mat-option> 2 </mat-option>
   </mat-select>
</div>