1

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?

NoDiggityNoDoubt
  • 341
  • 1
  • 3
  • 18

1 Answers1

0

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

Zohar H
  • 1
  • 1