Angular Material MatDatePicker：如何使其保持展开并与输入框分离

刚好之前碰到过类似需求，要把MatDatePicker的日期选择面板作为静态视图展示，不用输入框触发，还得保持始终展开。下面是具体的实现步骤：

1. 直接渲染日期选择面板，移除输入框 #

你完全不需要依赖matInput来驱动日期选择器，直接把mat-datepicker组件放到模板里就行。设置[opened]="true"让它默认展开，还可以通过startView设置默认打开的视图（比如月视图、年视图）：

<mat-datepicker 
  #staticCalendar 
  [opened]="true" 
  [startView]="'month'" <!-- 可选，默认是月视图 -->
  [(ngModel)]="lookup.FromDate" <!-- 绑定你的日期变量 -->
></mat-datepicker>

2. 阻止面板自动关闭 #

默认情况下点击面板外区域会关闭日期选择器，要让它保持展开，监听closed事件并阻止默认行为：

<mat-datepicker 
  #staticCalendar 
  [opened]="true"
  (closed)="$event.preventDefault()"
  [(ngModel)]="lookup.FromDate"
></mat-datepicker>

3. 样式调整（按需优化） #

如果觉得默认面板的样式不符合你的布局需求，可以加一点自定义CSS，比如去掉边框、调整宽度：

/* 移除日期选择面板的边框 */
.mat-datepicker-content {
  border: none;
}

/* 让日历占满容器宽度 */
.mat-calendar {
  width: 100%;
}

4. 确保模块依赖正确 #

别忘了在你的Angular模块中导入必要的依赖：

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { FormsModule } from '@angular/forms'; // 如果用ngModel的话

@NgModule({
  imports: [
    // ...其他模块
    MatDatepickerModule,
    MatNativeDateModule,
    FormsModule
  ]
})
export class YourModule { }

额外小技巧 #

如果只是要展示日历、不需要选择功能，可以加上[disabled]="true"禁用交互，同时去掉ngModel绑定：

<mat-datepicker 
  #staticCalendar 
  [opened]="true"
  (closed)="$event.preventDefault()"
  [disabled]="true"
></mat-datepicker>

内容的提问来源于stack exchange，提问作者Jonas Praem