I am currently working with a React Kendo Grid which is filled with data by an API. On of the columns is Date and the data filling it comes in a format like:
2022-02-11T15:50:51.000+00:00
I tried to format the Kendo Grid column like this:
<GridColumn
field="snDate"
filter="date"
format="{0:yyyy-MM-dd'T'HH:mm:ss.SSS'Z'}"
width="200px"
title="Date"
/>
but when I filter it with Kendo datapicker filter, it returns no rows. What am I doing wrong?
You need to make a custom column compoenet and play with the date over there:
const DateCell = ({ myDate }) => {
const [year, month, day] = myDate.split('T')[0].split('-');
const time_part = myDate.split('T')[1];
return (
<td>
{`${year}/${month}/${day} ${time_part}`}
</td>
)
}
//export default DateCell //this is if you want to put it in separate component
<GridColumn
field="snDate"
filter="date"
width="200px"
title="Date"
cell={DateCell}
/>
My result is -> 2022/06/19 10:35:13.197
And when you filter it React Kendo Grid knows that the value of each cell is in the first format that you mentioned, I mean to the 2022-02-11T15:50:51.000+00:00 and the filter will work.
It's worked for me.
Good luck