Question

我有一个包含DATETIME列SaleDate的SQL Server表-不幸的是，到目前为止，我无法将数据类型更改为仅DATE（就足够了）。 / p>

我正在尝试使用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和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网格中定义编辑日期格式

1 个答案: