答案 0 :(得分:1)
这是你正在努力实现的目标:
如果是这样,这就是我要做的事情:
在afterViewInit
中(组件类实现AfterViewInit
):
const startDateColDef: ColDef = this.grid.columnApi.getColumn('startDate').getColDef();
startDateColDef.cellEditorFramework = GridCellDateComponent;
startDateColDef.valueFormatter = (pars: ValueFormatterParams) => GridCellDateComponent.formatForDisplay(pars);
GridCellDateComponent
模板包含:
<mat-form-field>
<input
matInput
[matDatepicker]='picker'
[(ngModel)]='value'
>
<mat-datepicker-toggle
matSuffix
[for]='picker'
>
</mat-datepicker-toggle>
</mat-form-field>
<mat-datepicker
#picker
(selectedChanged)='onSelectChange(event)'
>
</mat-datepicker>
组件类文件包含:
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ICellEditorParams, SelectionChangedEvent } from 'ag-grid';
import { MatDatepicker } from '@angular/material';
import { ValueFormatterParams } from 'ag-grid/dist/lib/entities/colDef';
@Component({
templateUrl: './grid-cell-date.component.html',
styleUrls: ['./grid-cell-date.component.css']
})
export class GridCellDateComponent implements AfterViewInit {
private cellEditorParams: ICellEditorParams;
private columnWidth: string;
private value: string;
@ViewChild('picker', {read: MatDatepicker}) picker: MatDatepicker<Date>;
public static formatForDisplay(params: ValueFormatterParams): string {
if (!params) {
return '';
}
let date: Date;
if (typeof params.value === 'number' || typeof params.value === 'string') {
const stringValue = String(params.value);
if (stringValue.length > 7 && /^[0-9]*$/.test(stringValue)) {
const year: number = parseInt(stringValue.substring(0, 4), 10);
const month: number = parseInt(stringValue.substring(4, 6), 10);
const day: number = parseInt(stringValue.substring(6, 8), 10);
date = new Date(year, month - 1, day);
}
} else {
date = params.value;
}
return date ? date.toLocaleDateString() : '';
}
agInit(params: ICellEditorParams): void {
this.cellEditorParams = params;
this.value = params.value;
console.log(this.value);
}
getValue(): string {
console.log(this.value);
return this.value;
}
isCancelAfterEnd(): boolean {
return false;
}
isCancelBeforeStart(): boolean {
return false;
}
isPopup(): boolean {
return false;
}
ngAfterViewInit() {
this.picker.open();
}
onSelectChange(event: SelectionChangedEvent): void {
setTimeout(() => {
this.cellEditorParams.stopEditing();
});
}
}
我从以下链接获得了大部分指导:Datepicker Cell Editor Example。