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

【问题标题】：Define editing date format in AG Grid在 AG Grid 中定义编辑日期格式
【发布时间】：2018-09-27 20:51:52
【问题描述】：

我有一个 SQL Server 表，其中包含一个 DATETIME 列 SaleDate - 不幸的是，目前我无法将数据类型更改为 DATE（这已经足够了）。

我正在尝试使用 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 单元格中的编辑格式？

【问题讨论】：

标签： ag-grid date-formatting

【解决方案1】：

如果您需要为display 和edit 事物提供解决方法（准备视觉和真实数据），您应该为此单元格创建自己的cellRenderer 和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;
}

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

【讨论】：