如何将 mat-datepicker-toggle mat-icon 放置在日期输入字段的末尾

Question

我已经尝试在网络上搜索了一段时间，但没有直接答案。 我希望将切换图标放置在日期输入字段的最末尾。

Answer 1

也许尝试一下这个例子

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

Answer 2

您可以制作一个自定义图标，从单击事件中打开日期选择器，您可以将此按钮放在您想要的位置：

<mat-form-field class="example-full-width">
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<button mat-raised-button (click)="picker.open()">Open</button>

Answer 3

要将图标放置在末尾，您必须使用

matSuffix

，如果您希望将其放置在开头，请使用

matPrefix

。

  <mat-datepicker-toggle matSuffix [for]="rangePicker"></mat-datepicker-toggle>


  <mat-datepicker-toggle matPrefix [for]="rangePicker"></mat-datepicker-toggle>