Angular 升级后日期输入后缀未出现在 matFormField 中

Date input suffix not appearing inside a matFormField after Angular upgrade

提问人:Scott-MEARN-Developer 提问时间:11/15/2023 最后编辑:Scott-MEARN-Developer 更新时间:11/16/2023 访问量:31

问:

我在matFormField中有一个类型为'datetime-local'的输入,如下所示:

        <mat-form-field>
          <input
            formControlName="dateTimeSelect"
            matInput
            type="datetime-local"
            id="date"
            name="date"
            required
          />
        </mat-form-field>

窗体应有一个日历图标作为后缀,单击后,将打开日期/时间选取器,如下所示:

enter image description here

当我使用 Angular v14 时,这工作正常,但是自从将我的应用程序升级到 Angular v16 后,它就停止工作了。

如果我从其 matFormField 包装器中删除输入,它将按预期工作。但是,在 matFormField 中,后缀图标不会显示。

我尝试更改 .mat-mdc-form-field.mat-mdc-form-field-icon-suffix 的全局样式,以查看后缀图标是否可能被隐藏,但自从更新 Angular 以来,后缀似乎已从输入中完全删除。

我知道一种解决方案是使用 matDatepicker,但我试图避免这种情况,因为它不提供时间选择器选项。

html css 角度 输入 mat-form-field

评论


答:

1赞 D A 11/16/2023 #1

由于某些原因,该按钮以某种方式隐藏,但它仍然存在。为了显示它,只需添加以下 CSS:

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