I have a date column from a grid from AG-GRID React.
{
field: 'dateEcheance',
suppressHeaderMenuButton: true,
valueSetter: (params) => {
const newTimestamp = new Date(params.newValue).getTime();
if (params.oldValue !== newTimestamp) {
const updatedData = {
...params.data,
dateEcheance: newTimestamp,
};
params.api.applyTransaction({ update: [updatedData] });
return true;
}
return false;
},
cellEditor: 'agDateCellEditor',
editable: true,
cellRenderer: TimestampCell,
},
the duedate input value is a timestamp like this: dateEcheance : 1695716511000.
value that is changed in in a cellRendered : TimestampCell
const TimestampCell = (props: any) => {
let formattedTimeStamp = '';
if (props.value) {
formattedTimeStamp = format(
new Date(props?.value),
'dd/MM/yyyy'
).toUpperCase();
}
return <span>{formattedTimeStamp}</span>;
};
export default TimestampCell;
the problem is when I want to edit the value of the cell when I select the date in the datePicker it selects the date but when I leave the editable field the value does not update.
initiale value :
selected value :
final value :
the modified value is not taken into account, is there a solution?
1
The agDateCellEditor requires your value to come in as a “Date”. See the very top of the screen here: https://www.ag-grid.com/javascript-data-grid/provided-cell-editors-date .
It looks like your date is coming in as an ISO String. You can map “newValue” from ISO String to date like this. And then set the rowData for your grid.
const mappedData = dataFromServer.map((x) => ({
...x,
newValue: new Date(x.newValue),
}));
setRowData(mappedData);
Then you don’t need a valueSetter anymore because the value is already the expected Date. You will probably still need a dataFormatter to display your date as the kind of string you prefer in the grid.