点击MatSelect自动打开Angular Material DatePicker并选择日期

针对你想要实现点击Angular的mat-select控件时自动打开Material DatePicker的需求，我整理了完整可运行的解决方案，结合你给出的代码片段做了补全和优化：

模板代码 (component.html) #

<form [formGroup]="myForm">
  <mat-select formControlName="postDate" 
              (click)="openCalendar(picker)" 
              (focus)="openCalendar(picker)"
              style="width: 220px;">
    <!-- 隐藏原有固定选项（如果不需要可直接移除） -->
    <mat-option value="8555" hidden><i>Delay Crew - 8555</i></mat-option>
    <mat-option value="9000" hidden><i>Self Install - 9000</i></mat-option>
    
    <!-- 嵌入日期选择器容器 -->
    <mat-option>
      <mat-form-field appearance="fill" style="margin: 0;">
        <input matInput 
               [matDatepicker]="picker" 
               formControlName="postDate"
               (dateChange)="syncDateValue($event)"
               placeholder="选择日期">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </mat-option>
  </mat-select>
</form>

组件类代码 (component.ts) #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatDatepicker } from '@angular/material/datepicker';
import { DateAdapter } from '@angular/material/core';

@Component({
  selector: 'app-date-trigger-select',
  templateUrl: './date-trigger-select.component.html',
  styleUrls: ['./date-trigger-select.component.css']
})
export class DateTriggerSelectComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder, private dateAdapter: DateAdapter<Date>) {
    // 初始化表单控件
    this.myForm = this.fb.group({
      postDate: ['']
    });
    // 设置日期本地化（可选，根据需求调整）
    this.dateAdapter.setLocale('zh-CN');
  }

  // 触发打开日期选择器的核心方法
  openCalendar(picker: MatDatepicker<Date>) {
    // 确保选择器未打开时再调用open()，避免重复触发
    if (!picker.opened) {
      picker.open();
    }
  }

  // 同步选择的日期值到表单控件
  syncDateValue(event: any) {
    const selectedDate = event.value;
    // 可以在这里添加日期格式转换逻辑
    this.myForm.get('postDate')?.setValue(selectedDate);
  }
}

关键实现说明 #

• 事件绑定：给mat-select绑定(click)和(focus)事件，覆盖鼠标点击和键盘聚焦两种触发场景，确保用户无论怎么操作控件都能打开日期选择器。
• 隐藏冗余选项：把你原来的固定值选项设置为hidden，因为我们的核心需求是用mat-select触发日期选择，而非选择这些固定值；如果完全不需要这些选项，直接删除即可。
• 日期选择器关联：通过#picker模板引用变量，将输入框和日期选择器绑定，openCalendar方法接收该引用并调用open()方法触发弹窗。
• 值同步处理：通过(dateChange)事件监听日期选择动作，确保表单控件postDate能实时获取到选中的日期值，保持数据一致性。

可选优化（样式调整） #

如果希望mat-select看起来更像日期选择按钮，可以添加CSS隐藏下拉箭头：

.mat-select-arrow {
  display: none;
}

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