Define editing date format in AG Grid - ag-grid

Question

I have a SQL Server table which contains a DATETIME column SaleDate - and unfortunately, for now, I cannot change the datatype to just DATE (which would be sufficient).
I am trying to show data from that column in an Angular app using the Ag Grid.
For the display, I was able to use this in my Typescript code:
columnDefs = [
....
{ headerName: 'Sale', field: 'SaleDate', width: 120, editable: true,
cellRenderer: (data) => {
return data.value ? (new Date(data.value)).toLocaleDateString('de-CH', this.options) : '';
},
....
]
and it works quite nicely.
However, when I try to edit this cell, unfortunately the whole DATETIME details (including the time portion) is being displayed:
[ 2018-09-27T08:43:59 ]
That'll be quite confusing to the users.... so is there a way to also somehow set / define the format for the editing in an AG-Grid cell?

Answer 1

If you need to have a workaround (prepare visual and real data) for display and edit things, you should create an own cellRenderer and cellEditor for this cell.
Or you can just create a cellEditor for calendar component and valueFormatter for displaying the date.
Just my case for same requirements 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;
On custom cellEditor the major thing is getValue function - which will be used internally (for binding)
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;
}
And on the template, you can use any calendar template library.