Есть ли способ центрировать DatePicker по вертикали в mat-datepicker?

Question

Существует два состояния:

Состояние - 01:

Состояние - 02:

В состоянии 01 «Выбрать дату» центрируется по вертикали. Таким образом, я пытаюсь центрировать текст «Выберите дату» и выбранную дату по вертикали. Не уверен, что мне не хватает. Пожалуйста, помогите мне.

Моя ссылка на stackBlitz здесь

Answer 1

В вашем случае, когда вам нужно стилизовать ввод с помощью поля angular -материал, предоставьте этот ввод 'origin = "outline" `, если вы хотите использовать, например,

<mat-form-field appearance="outline">
    <mat-label>Outline form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    <mat-hint>Hint</mat-hint>
  </mat-form-field>

Иначе, если вы хотите чтобы стилизовать этот кастом, как в вашем примере, вам понадобится какой-то стиль, например, дать ему padding, когда он имеет float-label, как показано ниже

::ng-deep .mat-form-field.mat-form-field-should-float {
    padding-top:20px;
}

ПРИЧИНА: Нормальное поведение mat-input заключается в том, что он плавает надписью выше в некоторых отрицательных значениях, вы можете установить float в never, чтобы надписи не были go выше, более подробно вы можете прочитать в [OFFICIAL DOC]

(https://material.angular.io/components/input/overview)