如何在Angular Material Timepicker中显示秒数

Angular Material原生Timepicker默认仅支持小时和分钟选择，但可以通过配置自定义格式或扩展组件的方式实现秒数显示与选择，以下是两种可行方案：

方案1：配置自定义时间格式（仅输入框显示秒） #

通过自定义MAT_DATE_FORMATS，让输入框支持秒数格式的解析与展示：

1. 在你的Angular模块中定义自定义格式并提供：

import { NgModule } from '@angular/core';
import { MAT_DATE_FORMATS } from '@angular/material/core';
import { MatTimepickerModule } from '@angular/material/timepicker';
import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// 包含秒数的自定义时间格式
export const CUSTOM_TIME_FORMATS = {
  parse: {
    timeInput: 'HH:mm:ss',
  },
  display: {
    timeInput: 'HH:mm:ss',
    clockHourLabel: 'HH',
    clockMinuteLabel: 'mm',
    clockSecondLabel: 'ss',
  },
};

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatTimepickerModule,
    MatInputModule
  ],
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_TIME_FORMATS }
  ]
})
export class AppModule { }

2. 在组件模板中使用Timepicker：

<mat-form-field>
  <input matInput [matTimepicker]="picker" placeholder="选择时间" type="time">
  <mat-timepicker-toggle matSuffix [for]="picker"></mat-timepicker-toggle>
  <mat-timepicker #picker></mat-timepicker>
</mat-form-field>

此方案会让输入框显示HH:mm:ss格式的时间，但弹出的时钟面板仍只有小时和分钟选择器，用户需手动输入秒数。

方案2：自定义时钟面板（支持秒数选择） #

若需要在弹出的时钟面板中可视化选择秒数，需自定义面板模板并实现秒选择组件：

1. 在组件模板中定义自定义时钟模板：

<ng-template #customClock let-time="time" let-period="period" let-togglePeriod="togglePeriod">
  <!-- 原生小时选择器 -->
  <mat-timepicker-hours 
    [time]="time" 
    [period]="period" 
    (selectedHour)="picker.selectHour($event)">
  </mat-timepicker-hours>
  
  <!-- 原生分钟选择器 -->
  <mat-timepicker-minutes 
    [time]="time" 
    (selectedMinute)="picker.selectMinute($event)">
  </mat-timepicker-minutes>
  
  <!-- 自定义秒选择器（需自行实现） -->
  <mat-timepicker-seconds 
    [time]="time" 
    (selectedSecond)="picker.selectSecond($event)">
  </mat-timepicker-seconds>
  
  <!-- AM/PM切换按钮（按需保留） -->
  <button mat-icon-button (click)="togglePeriod()" *ngIf="picker.showPeriodLabel">
    <mat-icon>{{ period }}</mat-icon>
  </button>
</ng-template>

<mat-form-field>
  <input matInput [matTimepicker]="picker" placeholder="选择时间" type="time">
  <mat-timepicker-toggle matSuffix [for]="picker"></mat-timepicker-toggle>
  <mat-timepicker #picker [clockTemplate]="customClock"></mat-timepicker>
</mat-form-field>

2. 实现mat-timepicker-seconds组件：
   参考Angular Material原生的mat-timepicker-hours和mat-timepicker-minutes组件结构，开发一个支持秒数选择的组件，通过Time对象操作秒数并同步到Timepicker实例。

此外，也可以选择基于Angular Material的第三方扩展组件库，这类库通常内置了支持秒数的时间选择器功能。

内容的提问来源于stack exchange，提问作者Tobbe