SitecoreJSS DateField is not able to format date coming from GraphQl query

Question

I'm getting a Date from GraphQl query. When I get the result, it is coming as 20200415T123050Z.

If I try to format using

<DateField field={item.publishDate} render={(date) => date.toLocaleDateString()} />

(tried it with dateOptions as well ) it says "Invalid Date" on the page.

Is there a way to format the date in GraphQL or after I have received the searchResult?

Thanks

Answer 1

Try retrieve jss of date field in graphQL instead of value and render the same using .

Sample graphQL call

query RetDates($itemPath: String = "/sitecore/Content/TestItems") {
  folderItem: item(path: $itemPath)
  {
    children{
      dateVal: field(name:"dateVal")
      {
        jss
      }
    }
  }
}

Sample rendering

<DateField field={child.dateVal.jss} render={(date) => date.toLocaleDateString()} />

The above change will render date like this,