如何将日历图标移动到输入内部？ Angular Material

Question

我是 Angular Material 的新手，我正在构建一个日期选择器。我需要将图标从输入字段外部移动到内部。我尝试导入一些 Material 主题，但没有找到具有这种风格的主题，有人知道如何做吗？这是我的 html:

<input matInput formControlName="startDate" [matDatepicker]="basicDatepicker" (click)="basicDatepicker.open()" >
<mat-datepicker-toggle matSuffix [for]="basicDatepicker"></mat-datepicker-toggle>
<mat-datepicker #basicDatepicker></mat-datepicker>

Answer 1

为了让它看起来像实际的 material 您的代码应该如下所示：

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

您可以在文档中查看更多详细信息和其他类型的实现：https://material.angular.io/components/datepicker/overview

Answer 2

您可以使用css来设置图标隐藏，并在日历外放置一个您自己来源的图标。

检查图标 class 并用这样的东西设置他的可见性

::ng-deep .targetClass {
    visibility: hidden;
}

您需要使用 ng-deep 来获取 classes deep-in angular 组件

我建议用另一个 class 包装日历，这样您的 CSS 只会影响目标日历

像这样：

.wrapperClass ::ng-deep .targetClass {
  visibility: hidden;
}

Answer 3

谢谢大家！我用过这个：

<mat-form-field appearance="outline">

并根据建议使用 ::ng-deep

自定义类

如何将日历图标移动到输入内部？ Angular Material

How to move calendar icon to the inside of the input? Angular Material

html

css

datepicker

angular-material

angular