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

Question

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

我正在尝试使用 Ag 网格在 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;
}

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