要使用Angular和Ag-Grid来创建日期单元格编辑器，可以按照以下步骤操作：

1. 首先，确保已经安装了Angular和Ag-Grid依赖项。可以使用以下命令安装它们：

npm install @angular/core @angular/forms ag-grid-angular ag-grid-community

2. 在Angular应用程序的模块文件（通常是app.module.ts）中导入Ag-Grid和相关模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AgGridModule } from 'ag-grid-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    AgGridModule.withComponents([])
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 创建一个组件来包含Ag-Grid表格。在组件的HTML模板中，添加一个Ag-Grid表格和一个自定义的日期单元格编辑器：

4. 在组件的TypeScript文件中，定义rowData和columnDefs，并实现自定义日期单元格编辑器的逻辑：

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  rowData = [
    { date: new Date() },
    { date: new Date() },
    { date: new Date() }
  ];

  columnDefs = [
    { headerName: 'Date', field: 'date', editable: true, cellEditor: 'dateEditor' }
  ];

  onGridReady(params) {
    params.api.sizeColumnsToFit();
  }

  onKeyDown(event) {
    if (event.keyCode === 13) {
      event.stopPropagation();
    }
  }
}

5. 在组件的TypeScript文件中，使用@ViewChild()装饰器来获取模板中的日期单元格编辑器，并将其添加到Ag-Grid的编辑器注册表中：

// app.component.ts
import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  // ...
})
export class AppComponent {
  // ...

  @ViewChild('dateEditor', { read: ViewContainerRef }) dateEditorRef;

  constructor() { }

  onGridReady(params) {
    params.api.sizeColumnsToFit();
    params.api.addCellEditor('dateEditor', {
      getGui: () => this.dateEditorRef,
      afterGuiAttached: () => this.dateEditorRef.element.nativeElement.focus()
    });
  }

  // ...
}

6. 运行应用程序，并查看生成的Ag-Grid表格。当单击日期单元格进行编辑时，将显示自定义的日期单元格编辑器。

希望这个示例能够帮助你创建一个包含日期单元格编辑器的Angular Ag-Grid应用程序！