在agGrid中添加ngbDatepicker

import { Component } from '@angular/core';
import { NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';

<ag-grid-angular
  style="width: 100%; height: 100%;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [frameworkComponents]="frameworkComponents"
></ag-grid-angular>

import { Component } from '@angular/core';
import { NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-custom-datepicker',
  template: `
    <input
      class="form-control"
      [(ngModel)]="value"
      (ngModelChange)="onDateChange()"
      ngbDatepicker
    />
  `,
})
export class CustomDatepickerComponent implements ICellEditorAngularComp {
  private params: any;
  public value: any;

  agInit(params: any): void {
    this.params = params;
    this.value = this.params.value;
  }

  getValue(): any {
    return this.value;
  }

  onDateChange(): void {
    this.params.api.stopEditing();
  }
}

import { Component } from '@angular/core';
import { CustomDatepickerComponent } from './custom-datepicker.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  columnDefs = [
    {
      headerName: 'Date',
      field: 'date',
      editable: true,
      cellEditor: 'customDatepicker',
    },
  ];

  frameworkComponents = {
    customDatepicker: CustomDatepickerComponent,
  };

  rowData = [
    { date: '2022-01-01' },
    { date: '2022-02-01' },
    { date: '2022-03-01' },
  ];
}