Formatting JSON date in Javascript rendered HTML

Question

I am having trouble formatting a date from JSON from 2017-03-22 00:00:00 -0400 format to MM/DD/YYYY format.

var formatResults = function(data) {
      return "<tr>" +
                "<td data-title=\"amount\" class=\"amount\">" + data['amount'] + "<span class=\"result\">result</span></td>" +
                "<td data-title=\"case\">" + data['case'] + "</td>" +
                "<td data-title=\"title\">Title of Case</td>" +
                "<td data-title=\"user\" class=\"numeric\">" + data['person'] + "</td>" +
                "<td data-title=\"location\" class=\"numeric\">" + data['office'] + "</td>" +
                "<td data-title=\"date\" class=\"numeric\">" + data['date'] +
                "</td>" +
             "</tr>";
};

How can I transform the date passed directly from the JSON into the necessary format above?

`let [[year, mon, day]] = date.split(' ').map(s => s.split('-'));` — Jared Smith, Mar 23 '17 at 16:46
Possible duplicate of [How to format a JavaScript date](http://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) — dgiugg, Mar 23 '17 at 16:48
@JaredSmith - can you provide an example of using your solution within my code? — Matt, Mar 23 '17 at 16:49
You should use 'moment' here. And call it something like: `moment('2017-03-22 00:00:00 -0400','YYYY-MM-DD HH:mm:ss -HH:mm').format('MM/DD/YYYY');` — Apoorv Joshi, Mar 23 '17 at 16:54

score 0 · Answer 1 · answered Mar 23 '17 at 16:56

You'll likely have to transpile the ES 6 for older browsers, but here you go:

var formatResults = function(data) {
      let [[year, mon, day]] = date.split(' ').map(s => s.split('-'));
      let date = `${mon}/${day}/${year}`;
      return "<tr>" +
                "<td data-title=\"amount\" class=\"amount\">" + data['amount'] + "<span class=\"result\">result</span></td>" +
                "<td data-title=\"case\">" + data['case'] + "</td>" +
                "<td data-title=\"title\">Title of Case</td>" +
                "<td data-title=\"user\" class=\"numeric\">" + data['person'] + "</td>" +
                "<td data-title=\"location\" class=\"numeric\">" + data['office'] + "</td>" +
                "<td data-title=\"date\" class=\"numeric\">" + date +
                "</td>" +
             "</tr>";
};

score -1 · Answer 2 · answered Mar 23 '17 at 16:47

-1

Moment.js is perfect for this kind of thing.

answered Mar 23 '17 at 16:47

Matt Litzinger

111
7

Don't want to use an additional resource to format one date. Should be able to just use built in JS to do so. – Matt Mar 23 '17 at 16:49
1

Fair enough. You could try this: `var date = new Date('2017-03-22 00:00:00 -0400'); alert((date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear());` – Matt Litzinger Mar 23 '17 at 16:55

Shawn G. · Accepted Answer · 2017-03-23T18:00:47.957

-1

You can use new Date(dateString) as long as the format can be parsed by Date.parse()

var date = new Date('2017-03-22 00:00:00 -0400');
var formattedDate = (date.getMonth()+1)+'/'+date.getDate()+'/'+date.getFullYear();

console.log(formattedDate);

edited Mar 23 '17 at 18:00

answered Mar 23 '17 at 16:56

Shawn G.

622
4
16

1

`Date.parse` is implementation-dependent except for ISO 8601 formatted date strings, which this isn't. – Jared Smith Mar 23 '17 at 16:56
Yeah, it should have used `Date.prototype.getDate` instead of `Date.prototype.getDay` – Shawn G. Mar 23 '17 at 17:20
How can I change the month to the word (i.e., Jan) instead of 1 and so on? – Matt Mar 23 '17 at 17:27
For that you may have to use a third-party library like moment or something like this: http://stackoverflow.com/questions/1643320/get-month-name-from-date – Shawn G. Mar 23 '17 at 18:04

Formatting JSON date in Javascript rendered HTML

3 Answers3