Angular Material mat-date-range-input占位符自定义居中对齐问题

问题描述 #

使用Angular Material的mat-date-range-input组件时，占位符默认显示在左上角，需将其调整为居中对齐，与右侧日历图标保持垂直对齐。

解决方案 #

通过覆盖Angular Material内置组件样式，调整布局规则实现对齐效果：

修改后的CSS代码 #

.date_container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mat-date-range-input {
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px; /* 调整开始/结束日期输入框的间距 */
}

/* 强制占位符垂直居中 */
.mat-date-range-input input::placeholder {
  display: flex;
  align-items: center;
  height: 100%;
}

/* 覆盖Angular Material内置输入控制样式，确保整体垂直对齐 */
.mat-mdc-form-field-input-control {
  align-items: center !important;
}

.set-width {
  width: 100%;
}

关键调整说明 #

1. 移除.date_container中的float: right，避免干扰flex布局的居中逻辑
2. 给.mat-date-range-input添加flex布局属性，确保内部输入框垂直居中
3. 通过input::placeholder样式强制占位符使用flex布局实现垂直居中
4. 覆盖组件内置的mat-mdc-form-field-input-control对齐规则，保证整体布局一致性

保持不变的HTML代码 #

<section class="search-filter-po">
    <form [formGroup]="RequiredFormGroup">
        <div class="row">
            <div class="col-md-12 search-row">
                <span class="d-flex justify-content-center">Creation Date</span>
                <mat-form-field class="set-width">
                    <div class="date_container">
                        <mat-date-range-input [rangePicker]="picker">
                            <input matStartDate formControlName="from_date" placeholder="Start date">
                            <input matEndDate formControlName="to_date" placeholder="End date" (dateInput)="incrementFilterCount()">
                        </mat-date-range-input>
                        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                        <mat-date-range-picker #picker></mat-date-range-picker>
                    </div>
                    <mat-error *ngIf="POFormGroup.controls.from_date.hasError('matStartDateInvalid')">Invalid start date</mat-error>
                    <mat-error *ngIf="POFormGroup.controls.to_date.hasError('matEndDateInvalid')">Invalid end date</mat-error>
                </mat-form-field>
            </div>
        </div>
    </form>
</section>

内容的提问来源于stack exchange，提问作者Manoj V