如何在Angular Material日期选择器左右添加区块展示选中日期并改样式

1. 布局结构与数据绑定 #

通过Flex布局将左右日期展示区块与Datepicker横向排列，同时绑定表单控件同步选中日期：

<div class="datepicker-container">
  <!-- 左侧选中日期展示 -->
  <div class="date-display-block">
    <span class="label">选中日期（左）：</span>
    <span class="date-text">{{ selectedDate | date:'yyyy-MM-dd' || '未选择' }}</span>
  </div>

  <!-- Angular Material Datepicker -->
  <mat-form-field appearance="fill" class="custom-datepicker">
    <mat-label>选择日期</mat-label>
    <input matInput [matDatepicker]="picker" [formControl]="dateControl">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

  <!-- 右侧选中日期展示 -->
  <div class="date-display-block">
    <span class="label">选中日期（右）：</span>
    <span class="date-text">{{ selectedDate | date:'yyyy-MM-dd' || '未选择' }}</span>
  </div>
</div>

2. 组件逻辑处理 #

在组件类中定义表单控件，监听日期变化并同步选中值：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-custom-datepicker',
  templateUrl: './custom-datepicker.component.html',
  styleUrls: ['./custom-datepicker.component.scss'],
  providers: [DatePipe]
})
export class CustomDatepickerComponent {
  dateControl = new FormControl();
  selectedDate: Date | null = null;

  constructor(private datePipe: DatePipe) {
    // 监听日期变化同步展示值
    this.dateControl.valueChanges.subscribe(date => {
      this.selectedDate = date;
    });
  }
}

3. 样式定制 #

通过深度选择器::ng-deep覆盖Material默认样式，同时设置布局和展示区块的样式：

.datepicker-container {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.date-display-block {
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #f5f5f5;
  min-width: 180px;

  .label {
    font-size: 14px;
    color: #666;
  }

  .date-text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-left: 8px;
  }
}

.custom-datepicker {
  width: 220px;

  // 覆盖Datepicker输入框样式
  ::ng-deep .mat-form-field-flex {
    border-radius: 4px;
    border: 1px solid #ccc;
  }

  ::ng-deep .mat-form-field-outline {
    display: none;
  }

  // 可选：定制日期面板样式
  ::ng-deep .mat-datepicker-content {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
}

关键说明 #

• Flex布局确保三个元素横向对齐，gap属性控制元素间距；
• 用FormControl监听日期变化，实时同步到左右展示区块；
• ::ng-deep用于穿透Angular组件样式隔离，修改Material默认样式（Angular 15+也可通过ViewEncapsulation.None或CSS变量替代）；
• DatePipe用于格式化日期展示，也可自行编写格式化逻辑适配需求。

内容的提问来源于stack exchange，提问作者Z.Mg