Angular Material同类时间选择器咨询：Firefox兼容及30分钟步长需求

替代方案说明 #

你提到的第三方时间选择器在Firefox出现兼容性问题，可直接使用Angular Material原生组件组合实现相同功能，官方组件的跨浏览器兼容性更有保障。以下是两种可行方案：

方案1：使用mat-select实现下拉式时间选择 #

这是最直接的方案，通过生成30分钟步长的时间选项列表，配合mat-select完成选择功能。

1. 组件逻辑代码（.ts） #

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

@Component({
  selector: 'app-time-picker',
  templateUrl: './time-picker.component.html'
})
export class TimePickerComponent {
  timeOptions: string[] = [];
  selectedTime: string | null = null;

  ngOnInit() {
    this.generate30MinuteStepTimes();
  }

  private generate30MinuteStepTimes() {
    let hour = 0;
    let minute = 0;
    while (hour < 24) {
      // 格式化时间为HH:mm格式
      const formattedTime = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
      this.timeOptions.push(formattedTime);
      
      minute += 30;
      if (minute === 60) {
        minute = 0;
        hour++;
      }
    }
  }
}

2. 模板代码（.html） #

<mat-form-field appearance="fill">
  <mat-label>选择时间</mat-label>
  <mat-select [(value)]="selectedTime" placeholder="请选择时间">
    <mat-option *ngFor="let time of timeOptions" [value]="time">
      {{ time }}
    </mat-option>
  </mat-select>
</mat-form-field>

3. 必要模块导入 #

确保在你的NgModule中导入Angular Material相关模块：

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatOptionModule } from '@angular/material/core';

@NgModule({
  imports: [
    // 其他模块
    MatFormFieldModule,
    MatSelectModule,
    MatOptionModule
  ]
})
export class YourModule { }

方案2：使用mat-dialog实现弹窗式时间选择 #

如果需要弹窗样式的时间选择器（和你需求的功能形态更接近），可以结合mat-dialog自定义时间选择面板：

1. 创建时间选择弹窗组件 #

弹窗组件的模板和逻辑可复用方案1中的时间列表生成逻辑，用mat-grid-list或mat-list展示时间选项，选择后关闭弹窗并返回选中值。

2. 父组件调用弹窗 #

import { MatDialog } from '@angular/material/dialog';
import { TimePickerDialogComponent } from './time-picker-dialog/time-picker-dialog.component';

// 在父组件中
constructor(private dialog: MatDialog) {}

openTimePickerDialog() {
  const dialogRef = this.dialog.open(TimePickerDialogComponent);
  
  dialogRef.afterClosed().subscribe(selectedTime => {
    if (selectedTime) {
      this.selectedTime = selectedTime;
    }
  });
}

兼容性说明 #

Angular Material官方组件已针对Firefox等主流浏览器做了兼容性适配，不会出现第三方组件的兼容问题。两种方案都支持30分钟步长的时间选择，可根据UI需求选择。

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