2

I have a Kendo React Grid to display data that I am fetching from a Sharepoint List. It is a simple grid as shown in this link - https://www.telerik.com/kendo-react-ui/components/grid/get-started/

<Column field="StartDate" title="Start Date" width="200px" format="{0:MMM yyyy}" />
<Column field="EndDate" title="End Date" width="200px" format="{0:MMM yyyy}" />

Right now the date is in ISO format like this-2014-08-14T15:30:10Z

How can I convert to mm/dd/yyyy format? The above value for format property doesn't seem to be working.

Priyanka Rao
  • 208
  • 3
  • 11
  • can you please provide a runnable code sample? If can not provide a runnable sample then at least provide the full code according to StackOverflow guidelines. – Sean Ch Jan 15 '21 at 21:39
  • You are also missing what flavor of kendo-grid you are using. there are a lot of them kendo for jquery, for angular, for asp.net, etc. – Sean Ch Jan 15 '21 at 21:45
  • I cannot share a runnable code. It is a simple kendo react grid.I have already mentioned the flavour of kendo grid in the question heading :) Also, I edited my question. Any help would be great :) – Priyanka Rao Jan 18 '21 at 06:47

3 Answers3

1

You can pass a custom function in 'cell' property to Column. Use 'moment' to customize the date as per your format.

    <Column field="StartDate" title="Start Date" width="200px" cell={this.myCustomDateCell}" />



myCustomDateCell = props => {
    if (props.dataItem[props.field] !== '') {
      return <td>{moment(props.dataItem[props.field]).format("MM/DD/YYYY")}</td>
    }
    return <td>{props.dataItem[props.field]}</td>
}
0

The KendoReact Grid formats only valid JavaScript date objects.

There is clarification from telerik: https://www.telerik.com/kendo-react-ui/knowledge-base/grid-date-format/

0

First you need to check what is returned from the server. If the server returned the date value in this format: 2022-02-11T15:50:51.000+00:00 you don't need to use 'moment', you can see my answer here:

https://stackoverflow.com/a/72772927/13663916

Zohar H
  • 1
  • 1