dlv . innerHTML = ` b > span class = 'name_plc' > / span > / b > br > ID : span class = "ida" > $ { feature . graphic . attributes . id } / span > br > URL : a href = "${feature.graphic.attributes.url}" target = "_blank" > View / a > br > Updated : span class = 'tiCon1' > $ { feature . graphic . attributes . updated } / span > br > Grid_value : $ { feature . graphic . attributes . grid_value } br > Event Time : span class = 'tiCon2' > $ { feature . graphic . attributes . eventTime } / span > style > . esri - popup__navigation { display : none ; } / style > ` ; let date1 = $ ( '.tiCon1' ) . text ( ) ; let dt = new Date ( date1 ) . toUTCString ( ) ; console . log ( dt ) ; I try the above to convert it, for instance and it consoles as invalid date... In the above, my event time and updated queries resolve as the numbers below.. I want to convert these to a human readable format. Updated: 1593543128000 <--------------------- Event Time: 1593021559000 <----------------------------

CamCode · 2020-07-13T14:20:50+00:00

dlv . innerHTML = ` b > span class = <SPAN class="string…

In your Codepen, this works: dlv . innerHTML = ` span class = 'name_plc' > / span > / b > br > ID : span class = "ida" > $ { feature . graphic . attributes . id } / span > br > URL : a href = "${feature.graphic.attributes.url}" target = "_blank" > View / a > br > Updated : $ { new Date ( JSON . parse ( feature . graphic . attributes . updated ) ) . toUTCString ( ) } br > Grid_value : $ { feature . graphic . attributes . grid_value } br > Event Time : $ { new Date ( JSON . parse ( feature . graphic . attributes . eventTime ) ) . toUTCString ( ) } style > . esri - popup__navigation { display : none ; } / style > ` ;

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

convert 'esriFieldTypeDate' to human readable (with JS)

CamCode

dlv<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> `<SPAN class="operator token"><</SPAN>b<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">'name_plc'</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>b<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>br<SPAN class="operator token">></SPAN>ID<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"ida"</SPAN><SPAN class="operator token">></SPAN>$<SPAN class="punctuation token">{</SPAN>feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">}</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>br<SPAN class="operator token">></SPAN> URL<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token"><</SPAN>a href<SPAN class="operator token">=</SPAN><SPAN class="string token">"${feature.graphic.attributes.url}"</SPAN> target<SPAN class="operator token">=</SPAN><SPAN class="string token">"_blank"</SPAN><SPAN class="operator token">></SPAN>View<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>br<SPAN class="operator token">></SPAN> Updated<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">'tiCon1'</SPAN><SPAN class="operator token">></SPAN>$<SPAN class="punctuation token">{</SPAN>feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>updated<SPAN class="punctuation token">}</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>br<SPAN class="operator token">></SPAN>Grid_value<SPAN class="punctuation token">:</SPAN> $<SPAN class="punctuation token">{</SPAN>feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>grid_value<SPAN class="punctuation token">}</SPAN><SPAN class="operator token"><</SPAN>br<SPAN class="operator token">></SPAN> Event Time<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">'tiCon2'</SPAN><SPAN class="operator token">></SPAN>$<SPAN class="punctuation token">{</SPAN>feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>eventTime<SPAN class="punctuation token">}</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN><SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>popup__navigation <SPAN class="punctuation token">{</SPAN> display<SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>`<SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">let</SPAN> date1<SPAN class="operator token">=</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.tiCon1'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">text</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">let</SPAN> dt <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Date</SPAN><SPAN class="punctuation token">(</SPAN>date1<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">toUTCString</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>dt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I try the above to convert it, for instance and it consoles as invalid date...

In the above, my event time and updated queries resolve as the numbers below.. I want to convert these to a human readable format.

Updated: 1593543128000 <---------------------

Event Time: 1593021559000 <----------------------------

Find more posts tagged with

Accepted answers

kenbuja

In your Codepen, this works:

dlv<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> `<SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">'name_plc'</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>b<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>br<SPAN class="operator token">></SPAN>ID<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"ida"</SPAN><SPAN class="operator token">></SPAN>$<SPAN class="punctuation token">{</SPAN>feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">}</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>br<SPAN class="operator token">></SPAN> URL<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token"><</SPAN>a href<SPAN class="operator token">=</SPAN><SPAN class="string token">"${feature.graphic.attributes.url}"</SPAN> target<SPAN class="operator token">=</SPAN><SPAN class="string token">"_blank"</SPAN><SPAN class="operator token">></SPAN>View<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>a<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>br<SPAN class="operator token">></SPAN> Updated<SPAN class="punctuation token">:</SPAN> $<SPAN class="punctuation token">{</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Date</SPAN><SPAN class="punctuation token">(</SPAN>JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">parse</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>updated<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">toUTCString</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">}</SPAN> <SPAN class="operator token"><</SPAN>br<SPAN class="operator token">></SPAN>Grid_value<SPAN class="punctuation token">:</SPAN> $<SPAN class="punctuation token">{</SPAN>feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>grid_value<SPAN class="punctuation token">}</SPAN><SPAN class="operator token"><</SPAN>br<SPAN class="operator token">></SPAN> Event Time<SPAN class="punctuation token">:</SPAN> $<SPAN class="punctuation token">{</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Date</SPAN><SPAN class="punctuation token">(</SPAN>JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">parse</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>eventTime<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">toUTCString</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">}</SPAN> <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN><SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>popup__navigation <SPAN class="punctuation token">{</SPAN> display<SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>`<SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

All comments

CamCode

Welp, actually doesn't look like I can use this -- worked fine in a CodePen, pushed to a server I'm getting a JSON parse error. Back to the drawing board.

Uncaught SyntaxError: Unexpected token M in JSON at position 0

CamCode

Solved after linting it with JSON.parse for some reason. i.e. Below worked in my case:

let dCn = $('.tiCon1').text();
let dl = JSON.parse(dCn); <-------------------------------- required this

const dTT = new Date(dl).toUTCString();
console.log(dTT);

kenbuja

If you take the Codepen from your previous question, adding this at line 168 gives your the time of each feature in the console.

console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Date</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>eventTime<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">toUTCString</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

CamCode

For me it consistently consoles as invalid date for some reason, even if I get the raw text to console (non object).

CamCode

I guess it is consoling as a date object

CScreenshot_Layer1Esri.png

Egge-Jan_Pollé

Hi Cam Code‌,

When I try the two values given, it works out fine for me. See below. (Date.prototype.toUTCString() - JavaScript | MDN )

What exactly is the content of your variable date1?

HTH,

Egge-Jan

<SPAN class="keyword token">const</SPAN> event <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Date</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">1593543128000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">toUTCString</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// expected output: Tue, 30 Jun 2020 18:52:08 GMT</SPAN>

<SPAN class="keyword token">const</SPAN> event <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Date</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">1593021559000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">toUTCString</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// expected output: Wed, 24 Jun 2020 17:59:19 GMT</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.