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

Question

我正在尝试将时间选择器添加到日期选择器。我尝试使用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>