如何将Angular Material日期选择器接入AgGrid日期类型单元格编辑器？

当然可以！完全不用迁就jQuery的方案，咱们直接基于Angular生态的组件来实现，把Angular Material的日期选择器封装成AgGrid的自定义单元格编辑器就好。下面是完整的实现步骤：

1. 准备依赖 #

首先确保你的项目里已经引入了Angular Material的日期相关模块，在你的app.module.ts（或者对应的业务模块）里导入：

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 AppModule {}

2. 创建自定义日期编辑器组件 #

新建一个组件，比如mat-date-picker-editor.component.ts，实现AgGrid提供的ICellEditorAngularComp接口，让它能被AgGrid识别为合法的单元格编辑器：

组件模板 (mat-date-picker-editor.component.html) #

<input 
  matInput 
  [matDatepicker]="picker" 
  [(ngModel)]="selectedDate"
  (dateChange)="onDateChange($event)"
>
<mat-datepicker #picker></mat-datepicker>

组件类 (mat-date-picker-editor.component.ts) #

import { Component } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';
import { ICellEditorParams } from 'ag-grid-community';

@Component({
  selector: 'app-mat-date-picker-editor',
  templateUrl: './mat-date-picker-editor.component.html'
})
export class MatDatePickerEditorComponent implements ICellEditorAngularComp {
  selectedDate: Date;
  private params: ICellEditorParams;

  agInit(params: ICellEditorParams): void {
    this.params = params;
    // 初始化选中日期，兼容传入的字符串或Date对象
    this.selectedDate = params.value ? new Date(params.value) : new Date();
  }

  getValue(): Date {
    // 返回选中的日期对象给AgGrid，用于更新数据源
    return this.selectedDate;
  }

  isPopup(): boolean {
    // 设置为弹窗模式，让日期选择器浮在表格上方，避免被单元格容器截断
    return true;
  }

  onDateChange(event: any): void {
    // 可选：用户选好日期后立即关闭编辑器（根据业务需求调整）
    this.params.api.stopEditing();
  }
}

别忘了把这个组件声明在你的模块里，同时要在使用AgGrid的父组件中，把它注册到frameworkComponents里：

// 引入自定义编辑器组件
import { MatDatePickerEditorComponent } from './mat-date-picker-editor.component';

@Component({
  // 组件元数据...
})
export class YourGridComponent {
  // 注册AgGrid的自定义框架组件
  frameworkComponents = {
    matDateEditor: MatDatePickerEditorComponent
  };

  // 表格列定义
  columnDefs = [
    // 其他列配置...
    {
      headerName: '取件日期',
      field: 'pickup_date',
      cellEditor: 'matDateEditor',
      // 可选：格式化日期显示，让单元格内容更友好
      valueFormatter: params => {
        return params.value ? new Date(params.value).toLocaleDateString() : '';
      }
    },
    {
      headerName: '归还日期',
      field: 'return_date',
      cellEditor: 'matDateEditor',
      valueFormatter: params => {
        return params.value ? new Date(params.value).toLocaleDateString() : '';
      }
    }
  ];
}

3. 样式调整（可选） #

如果日期选择器的弹窗显示位置或样式不太理想，可以添加少量自定义样式：

::ng-deep .ag-cell-editor-popup {
  padding: 0;
}

关键说明 #

• isPopup(): boolean 返回true是核心配置，这样日期选择器会以弹窗形式渲染，不会被表格单元格的容器限制高度
• 你也可以用Angular的DatePipe替代手动写的valueFormatter，实现更灵活的日期格式化
• agInit方法会接收AgGrid传入的单元格参数，用来初始化编辑器的初始值，确保编辑时显示当前单元格的已有数据

这样一来，你的日期列就能用Angular Material的日期选择器进行编辑，完全脱离jQuery的依赖，更贴合Angular项目的技术栈！

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