在 AG Grid 中定义编辑日期格式

Question

我有一个 SQL 服务器 table，其中包含一个 DATETIME 列 SaleDate - 不幸的是，目前我无法将数据类型更改为 [=14] =]（这就足够了）。

我正在尝试使用 Ag Grid 在 Angular 应用程序中显示该列的数据。

对于显示，我能够在我的 Typescript 代码中使用它：

columnDefs = [
    ....
    { headerName: 'Sale', field: 'SaleDate', width: 120, editable: true,
      cellRenderer: (data) => {
          return data.value ? (new Date(data.value)).toLocaleDateString('de-CH', this.options) : '';
    },
    ....
]

而且效果很好。

但是，当我尝试编辑此单元格时，不幸的是显示了整个 DATETIME 详细信息（包括时间部分）：

[ 2018-09-27T08:43:59 ]

这会让用户非常困惑....那么有没有办法以某种方式设置/定义 AG-Grid 单元格中的编辑格式？

Answer 1

如果您需要针对 display 和 edit 事情的变通方法（准备视觉数据和真实数据），您应该为此单元格创建一个自己的 cellRenderer and cellEditor。

或者您可以只为日历组件创建一个 cellEditor 并为显示日期创建一个 valueFormatter。

只是我的情况相同的要求valueFormatter:

let result: string;
if (params.value) {
    var formats = [
        moment.ISO_8601
    ];
    let date = moment(params.value, formats, true);

    if (date.isValid()) {
        let dateObject: Date = date.toDate();
        result = ('0' + dateObject.getDate()).slice(-2) + '.'
            + ('0' + (dateObject.getMonth() + 1)).slice(-2) + '.'
            + dateObject.getFullYear();
        if (element.DataType == "datetime")
            result += ' ' + ('0' + dateObject.getHours()).slice(-2) + ':'
                + ('0' + dateObject.getMinutes()).slice(-2) + ':'
                + ('0' + dateObject.getSeconds()).slice(-2);
    }
}
return result;

自定义 cellEditor 主要是 getValue 函数 - 将在内部使用（用于绑定）

getValue(): any {
    let value =  (this.selectedDate.getFullYear() + '-' 
        + ('0' + (this.selectedDate.getMonth() + 1)).slice(-2) + '-' 
        + ('0' +  this.selectedDate.getDate()).slice(-2)
        +  'T'
        + ('0' + this.selectedDate.getHours()).slice(-2) + ':'
        + ('0' + this.selectedDate.getMinutes()).slice(-2) + ':'
        + ('0' + this.selectedDate.getSeconds()).slice(-2));
    return value;
}

并且在模板上，您可以使用任何日历模板库。

在 AG Grid 中定义编辑日期格式

Define editing date format in AG Grid

date-formatting

ag-grid