如何通过锚点元素打开Material Calendar组件？日历显示在页面左上角

嘿，我看到你遇到了mat-datepicker点击打开后总是卡在页面左上角的问题，咱们来一步步把它搞定！

首先得说，你代码里的核心问题是把mat-calendar（嵌入式日历组件）和mat-datepicker（弹窗式日期选择器）嵌套在一起了——这俩是独立组件，嵌套会直接干扰datepicker的定位逻辑，再加上没指定锚定元素，它就只能默认跑到左上角去了。

下面是修正后的代码，我会给你拆解关键改动：

<li>
  <!-- 保留绑定用的输入框，用hidden类隐藏它 -->
  <input matInput [matDatepicker]="picker" class="hidden" />
  <!-- 给datepicker指定锚点为下面的a标签 -->
  <mat-datepicker #picker [anchor]="calendarAnchor"></mat-datepicker>
  <!-- 锚点元素，添加模板引用变量供datepicker使用 -->
  <a #calendarAnchor (click)="picker.open()">
    <i class="zmdi zmdi-calendar"></i>
  </a>
</li>

关键修改点说明： #

• 移除多余的mat-calendar：mat-datepicker本身就自带弹窗日历功能，完全不需要嵌套mat-calendar，这是导致定位混乱的元凶。
• 指定锚点元素：给a标签加个模板引用变量#calendarAnchor，再给mat-datepicker加上[anchor]="calendarAnchor"属性，这样日历就会乖乖锚定在这个a标签的位置打开，不会乱跑了。
• 隐藏输入框：mat-datepicker必须和matInput绑定才能正常工作，所以咱们保留输入框，用hidden类把它藏起来就行（记得确保你的hidden类设置了display: none或者visibility: hidden）。

额外要注意的细节： #

1. 确保你的模块里已经导入了必要的Material组件模块：

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';

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

2. 如果日历位置还是有点小偏差，可以用CSS微调：

.mat-datepicker-content {
  /* 根据你的需求调整上下左右偏移 */
  margin-top: 8px;
}

这样改完之后，点击日历图标时，弹窗就会在图标附近正确显示啦！

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