Trying to convert and display a collection of JSON format dates to normal format

Question

I am displaying 50 concert details on a page, which come from an online JSON source.

The date is in JSON format and I want to convert and display it in the normal format.

I was going down the route of acquiring by class name, converting and then appending; but I have hit a bit of a wall.

eventTimeConv is empty as I was going to append my converted date into there:

<div class = "eventTimeConv"></div>
<div id = "event-time" class = "event-date-time">{{ show.datetime }}</div>

The javascript I have written up so far:

function changeDate()
{
  var date = document.getElementsByClassName("event-date-time");

  var newDate = new Date(date);
  var dateConverted = newDate.toDateString();

  var div = document.getElementsByClassName("eventTimeConv");
}

The conversion to dateConverted fails due to 'date' being a collection I'm assuming.

Can anyone provide some guidance here? Or an alternate method?

Sorry, wasn't sure of that, but thought that was what it was. What is the correct terminology? — TS., Apr 19 '17 at 12:45
@TyroneStock—just show the actual value, which seems to be `"datetime":"2017-04-19T17:00:00"`, which is ISO 8601 extended format. — RobG, Apr 19 '17 at 20:45
This seems to be a duplicate of [*Why does Date.parse give incorrect results*](http://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) and [*Where can I find documentation on formatting a date in JavaScript?*](http://stackoverflow.com/questions/1056728/where-can-i-find-documentation-on-formatting-a-date-in-javascript) — RobG, Apr 19 '17 at 20:50

Fazal Rasel · Answer 1 · 2017-04-19T13:07:34.560

1

if you like to try momentjs then just format your date as-

<div class = "eventTimeConv"></div>
<div id = "event-time" class = "event-date-time">
  {{ moment(show.datetime).format('YYYY-MM-DD h:mm') }}
</div>

edited Apr 19 '17 at 13:07

answered Apr 19 '17 at 12:43

Fazal Rasel

4,446
2
20
31

1

why you think like that? – Fazal Rasel Apr 19 '17 at 12:46
I have tried this now, but my date divs are empty and no dates are being displayed – TS. Apr 19 '17 at 12:56
did you included momentjs library? – Fazal Rasel Apr 19 '17 at 12:59
Yeah I did, I tried both CDN and now I have actually downloaded and included it as I wasn't trusting the CDN. I'd really like this to work, very clean – TS. Apr 19 '17 at 13:01

score 1 · Answer 2 · answered Apr 19 '17 at 12:49

1

GetElementsByClassName will return an array of all the divs with that class. So when you pass the date variable to new Date() function is not receiving a valid date string.

You will have to loop through that array and pick out the value you want to set to set the date for.

answered Apr 19 '17 at 12:49

Jamie Clark

252
1
13

*getElementsByClassName* returns a live [*HTMLCollection*](https://dom.spec.whatwg.org/#htmlcollection), which is Array-like, but it's not an Array. – RobG Apr 19 '17 at 20:53

Trying to convert and display a collection of JSON format dates to normal format

2 Answers2