Angular Material日期选择器报错：一个MatDatepicker仅能关联单个输入框

你遇到的报错A MatDatepicker can only be associated with a single input.，核心原因是两个日期选择器用了同一个模板引用变量#picker——Angular Material的日期选择器实例只能绑定一个输入框，重复的变量会导致组件关联冲突，所以只有第一个输入框能响应日期选择操作，第二个完全失效。

修正后的代码 #

把第二个日期选择器的模板变量改成唯一值（比如#picker2），同时同步更新对应输入框和切换按钮的关联属性：

<div class="col-2">
    <mat-form-field appearance="outline" class="margin-0">
        <mat-label>{{ "PROD_REPORT.FROM" | translate }}</mat-label>
        <input matInput [matDatepicker]="picker" [(ngModel)]="start_time" />
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

    <mat-form-field appearance="outline" class="margin-0">
        <mat-label>{{ "PROD_REPORT.TO" | translate }}</mat-label>
        <input matInput [matDatepicker]="picker2" [(ngModel)]="end_time" />
        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
        <mat-datepicker #picker2></mat-datepicker>
    </mat-form-field>
</div>

关键修改说明 #

• 每个mat-datepicker必须使用唯一的模板引用变量，保证输入框、日期切换按钮、日期选择器组件三者能一一对应绑定，避免关联冲突。
• 第二个日期选择器的变量改为#picker2后，输入框的[matDatepicker]="picker2"和切换按钮的[for]="picker2"必须同步更新，确保组件间关联逻辑正确。

内容的提问来源于stack exchange，提问作者Arda Erdoğan