如何将日历图标移到输入的内部？角材料

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

要使其看起来像实际的材料，您的代码应如下所示：

<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将此图标设置为隐藏，然后将自己来源的图标放置在日历之外。

检查图标类，并使用类似的方法设置其可见性

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

您需要使用ng-deep来获取类的深度角度分量

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

赞：

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

Answer 3

谢谢你们！我用了这个：

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

并使用::ng-deep

自定义类