Angular Material 15 没有用于选择时间或日期的时间或日期时间选择器图标

Question

创建 Angular 15.0.4 项目时，然后从 cli 命令添加了 Angular Material 。重现错误的步骤( Angular 15.0.4)

1. 新建示例项目
2. ng 添加@angular/material (indigo-pink.css)
3. 在 NgModule 中添加了 MatFormField 和 MatInputModule My code in component
4. 将代码添加到 html

<mat-form-field>
    <input matInput type="time">
</mat-form-field>

ng 服务(不显示时钟图标来选择时间) view image for details

这是重现错误的 stackblitz 示例应用程序 https://stackblitz.com/edit/angular-hwx3pq?file=src/app/form-field-overview-example.html

但是当我删除 html 中的 mat-form-field 和 matInput 时，只是简单的 html 元素 ()，时钟图标将会出现。

我已经在版本 14 中尝试过，一切正常。时钟图标以相同的代码和配置显示。

Angular 15.0.4 结果:image Angular 14 结果:image

有人可以帮助我吗？

Answer 1

在此版本的 Material 库中，时间选择器指示器似乎被 css 隐藏了。请参阅以下样式:

.mdc-text-field__input::-webkit-calendar-picker-indicator {
  display: none;
}

您可以轻松地在组件的 CSS 中覆盖此行为，如下所示:

:host ::ng-deep .mdc-text-field__input::-webkit-calendar-picker-indicator {
  display: block;
}

如果您希望在全局范围内实现此行为，则需要将其添加到应用程序样式表中，而无需使用 :host 和 ::ng-deep 选择器以及 important ! 标志来抑制默认行为。

.mdc-text-field__input::-webkit-calendar-picker-indicator {
  display: block !important;
}

请参阅下面开发者控制台的屏幕截图，其中相关 css 标记为红色。

参见this updated Stackblitz一个工作示例。