Angular Material日期时间选择器不显示图标问题求助

核心修复步骤 #

1. 启用日期选择器切换按钮 #

你当前代码注释掉了mat-datepicker-toggle组件——这是显示触发图标的核心元素，必须取消注释并修正标签闭合：

<mat-form-field appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input formControlName="scheduledDate" matInput [ngxMatDatetimePicker]="picker"
        placeholder="Choose a date" [disabled]="true">
    <!-- 启用切换按钮并修正闭合标签 -->
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="true" [stepHour]="1"
        [stepMinute]="1" [stepSecond]="1" [touchUi]="false" [color]="undefined" [enableMeridian]="true"
        [disableMinute]="false" [hideTime]="false">
    </ngx-mat-datetime-picker>
</mat-form-field>

2. 处理输入框禁用状态 #

输入框设置[disabled]="true"时，切换按钮会默认继承禁用状态，图标可能变灰或不显示。若需在禁用状态下仍显示可点击的图标，单独给切换按钮设置启用：

<mat-datepicker-toggle matSuffix [for]="picker" [disabled]="false"></mat-datepicker-toggle>

3. 确认依赖与模块导入 #

确保项目已导入必要的Material模块和样式：

• 在模块中添加图标及日期选择器相关模块：

  import { MatFormFieldModule } from '@angular/material/form-field';
  import { MatInputModule } from '@angular/material/input';
  import { MatDatepickerModule } from '@angular/material/datepicker';
  import { NgxMatDatetimePickerModule } from '@angular-material-components/datetime-picker';
  import { MatIconModule } from '@angular/material/icon'; // 必须导入图标模块
  
  @NgModule({
    imports: [
      // ...其他模块
      MatFormFieldModule,
      MatInputModule,
      MatDatepickerModule,
      NgxMatDatetimePickerModule,
      MatIconModule
    ]
  })
  export class YourModule { }
  

• 在angular.json中导入Material主题和图标样式：

  "styles": [
    "@angular/material/prebuilt-themes/indigo-pink.css",
    "node_modules/@angular/material/icon/icon.css"
  ]
  

4. 排查样式冲突 #

检查自定义样式是否覆盖了mat-datepicker-toggle或mat-icon的默认样式，确保没有设置display: none或隐藏元素的规则。

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