Angular 14与Material UI下24小时制时间选择器组件求助

一、配置原生Angular Material Timepicker实现24小时制 #

Angular Material的MatTimepicker本身支持24小时格式，无需额外引入组件，通过以下两种方式配置即可：

1. 全局Locale配置 #

将应用Locale设置为默认使用24小时制的地区（如zh-CN、en-GB），全局生效：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTimepickerModule, MatInputModule, MatFormFieldModule } from '@angular/material';
import { LOCALE_ID } from '@angular/core';
import localeZh from '@angular/common/locales/zh';
import { registerLocaleData } from '@angular/common';

registerLocaleData(localeZh);

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatTimepickerModule
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'zh-CN' }
  ]
})
export class AppModule { }

模板使用示例：

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

2. 局部自定义时间格式 #

若不想全局修改Locale，可通过MAT_DATE_FORMATS单独配置时间显示/解析规则：

import { NgModule } from '@angular/core';
import { MAT_DATE_FORMATS } from '@angular/material/core';

// 自定义24小时制格式规则
export const CUSTOM_24H_TIME_FORMATS = {
  parse: {
    timeInput: 'HH:mm',
  },
  display: {
    timeInput: 'HH:mm',
    hour12Label: { '0': '', '12': '' },
    timeLabel: 'HH:mm'
  }
};

@NgModule({
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_24H_TIME_FORMATS }
  ]
})
export class YourFeatureModule { }

二、自定义扩展Timepicker组件 #

如果原生配置无法满足特殊需求（比如自定义输入校验、样式调整），可以通过指令扩展输入逻辑：

import { Directive, HostListener } from '@angular/core';
import { MatInput } from '@angular/material/input';

@Directive({
  selector: '[app24HourTimeValidator]'
})
export class TwentyFourHourTimeValidatorDirective {
  constructor(private matInput: MatInput) { }

  @HostListener('input')
  onInput() {
    let value = this.matInput.value.replace(/[^0-9:]/g, '');
    // 自动补全冒号
    if (value.length === 2 && !value.includes(':')) {
      value = `${value}:`;
    }
    // 限制输入长度为5（HH:mm）
    if (value.length > 5) {
      value = value.slice(0, 5);
    }
    // 校验小时范围（00-23）
    const parts = value.split(':');
    if (parts[0] && parseInt(parts[0], 10) > 23) {
      parts[0] = '23';
      value = parts.join(':');
    }
    this.matInput.value = value;
  }
}

模板中搭配使用：

<mat-form-field>
  <input matInput [matTimepicker]="picker" app24HourTimeValidator placeholder="24小时制时间">
  <mat-timepicker-toggle matSuffix [for]="picker"></mat-timepicker-toggle>
  <mat-timepicker #picker></mat-timepicker>
</mat-form-field>

三、第三方兼容组件方案 #

如果以上方案都无法适配需求，可以选择适配Angular 14的第三方组件：

• ngx-mat-timepicker：基于Angular Material扩展的时间选择器，原生支持24小时制开关配置
• @danielmoncada/angular-datetime-picker：兼容Material风格，支持24小时制、日期时间联动

以ngx-mat-timepicker为例，安装后导入模块：

import { NgxMatTimepickerModule } from 'ngx-mat-timepicker';

@NgModule({
  imports: [NgxMatTimepickerModule]
})
export class YourFeatureModule { }

模板使用：

<mat-form-field>
  <input matInput [ngxMatTimepicker]="picker" placeholder="选择时间" [format]="24">
  <ngx-mat-timepicker-toggle matSuffix [for]="picker"></ngx-mat-timepicker-toggle>
  <ngx-mat-timepicker #picker [showSeconds]="false"></ngx-mat-timepicker>
</mat-form-field>

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