Настройка Mat-datepicker

Question

Попытка настроить значок календаря, чтобы он отображался внутри текстового поля. Если я попытаюсь добавить css, он не реагирует, я прикрепил свой текущий результат и желаемый результат

Ожидается Выход

Токовый выход

Answer 1

Вы можете использовать внешний вид = "контур". Значок datepicker находится внутри границы поля mat-form.

Попробуйте следующее:

<mat-form-field appearance="outline">
  <mat-label>Outline form field</mat-label>
  <input matInput placeholder="Placeholder" [matDatepicker]="myDatepicker">
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker></mat-datepicker>
  <mat-hint>Hint</mat-hint>
</mat-form-field>

См .: stackblitz