How to convert geojson time field (currently in ISO-8601 date format) to be esri js usable?

[RossMcCandless]

Hi,

I'm using esri's javascript api to make a web map. Below you can see the popup template I'm trying to create for my geojson layer. Unfortunately, the dateFormat: "dayShortMonthYearLongTime" component isn't working because the geojson file is storing the date in ISO-8601 date format. Is there anyway to modify the geojson date field so that dateFormat: "dayShortMonthYearLongTime" works?

Note: the geojson file is https://opendata.arcgis.com/datasets/4af7c514f77b48db93ce0d0649a31aa9_0.geojson 

const currentClosuresTemplate = {

      title: "Current Road Closure Info",

      content: "Street Closed: {STREET_NAME} <br> Closed until: {DATE_TO}",

      fieldInfos: [

      {

            fieldName: "DATE_TO",

            format: {

            dateFormat: "dayShortMonthYearLongTime"

      }

}

]

}

[KenBuja]

Are you using the 3.x or 4.x API?

[RossMcCandless]

I'm using 4.12 API.

[KenBuja]

The 4.x API uses a different string in the dateFormat property

day-short-month-year-long-time

[RossMcCandless]

The geojson I'm using is supplying the time in a format that looks like 2019-08-19T12:00:00.000Z but when I apply the above dateFormat to it, it doesn't change how the time displays.

[KenBuja · Accepted solution]

You're correct. It looks like it's expecting the time to be in Epoch time format. I was able to get it formatted using a content function

const currentClosuresTemplate = {
  title: "Current Road Closure Info",
  content: formatContent,
  outFields: ["*"]
};

function formatContent(feature) {
  let street_name = feature.graphic.attributes.STREET_NAME;
  let date_to = new Date(feature.graphic.attributes.DATE_TO);
  return street_name + "<br>  Closed until " + date_to.toLocaleString();
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note that you have to specify outFields in 4.12 when using a function.

[RossMcCandless]

Thanks Ken,

This solved it for me.

[KenBuja]

Glad to help. Please remember to click the "Mark Correct" button.