Material Datepicker点击输入框时无法设置startAt初始值

问题根源 #

通过输入框的(click)或(focus)事件直接触发日历面板打开时，Angular Material Datepicker可能未及时读取startAt的绑定值，导致默认选中状态不同步；而点击切换图标时，组件内部会正确初始化并读取startAt，因此能正常显示选中值。

解决方案 #

不要直接依赖事件绑定触发打开，而是通过手动调用MatDatepicker的open()方法，确保在打开前已同步startAt值到表单控件：

1. 组件类代码

import { Component, ViewChild, OnInit } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-datepicker-demo',
  templateUrl: './datepicker-demo.component.html'
})
export class DatepickerDemoComponent implements OnInit {
  dateControl = new FormControl();
  @ViewChild(MatDatepicker) datepicker!: MatDatepicker<Date>;
  defaultSelectedDate = new Date('2024-05-20'); // 自定义默认日期

  ngOnInit(): void {
    // 初始化时同步默认值到表单控件
    this.dateControl.setValue(this.defaultSelectedDate);
  }

  openCalendarPanel(): void {
    // 再次确保值同步（兼容异步更新场景）
    this.dateControl.setValue(this.defaultSelectedDate);
    this.datepicker.open();
  }
}

2. 模板代码

<mat-form-field appearance="fill">
  <mat-label>选择日期</mat-label>
  <input 
    matInput 
    [matDatepicker]="picker" 
    [formControl]="dateControl"
    (click)="openCalendarPanel()"
    (focus)="openCalendarPanel()"
  >
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker [startAt]="defaultSelectedDate"></mat-datepicker>
</mat-form-field>

异步默认值处理 #

如果默认日期是通过异步请求获取的，需在值返回后再同步控件值：

import { of, delay } from 'rxjs';

// 模拟异步获取默认日期
defaultDate$ = of(new Date('2024-05-20')).pipe(delay(1000));

ngOnInit(): void {
  this.defaultDate$.subscribe(date => {
    this.defaultSelectedDate = date;
    this.dateControl.setValue(date);
  });
}

模板中可配合async管道绑定startAt：

<mat-datepicker #picker [startAt]="defaultDate$ | async"></mat-datepicker>

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