How to display Json date string as DD/MM/YYYY in a table

Question

I'm trying to format some json dates in a table to a more readable format. The string returned from the json looks like this "2015-06-29T10:00:00.000Z".

The time is not important, I just want to show the date as dd/mm/yyyy.

I have tried using new date(detestring) but i might have got this wrong, as its not working. Here is the full code.

$(document).ready( function() {
 $.getJSON( 'opp.php', function(data) { 
  $.each(data.opportunities, function() { 
   $("table#outtodaytomorrow").append("<tr><td>" + this.number + "</td><td>" + new Date(this.starts_at) + "</td></tr>");
});
});
});

Any help much appreciated.

Probably a duplicate of [*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?s=1|13.3026) or [*How to format a JavaScript date*](http://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date?s=2|3.9424). — RobG, Feb 14 '17 at 20:46

Mihai Alexandru-Ionut · Answer 1 · 2017-02-15T07:13:43.990

1

You have to create your own function which achieve your target.

function formatDate(stringDate){
    var date=new Date(stringDate);
    return date.getDate() + '/' + (date.getMonth() + 1) + '/' +  date.getFullYear();
}

Your code:

$("table#outtodaytomorrow").append("<tr><td>" + this.number + "</td><td>" + formatDate(this.starts_at) + "</td></tr>");

edited Feb 15 '17 at 07:13

answered Feb 14 '17 at 20:45

Mihai Alexandru-Ionut

41,021
10
77
103

@Alexandru-lonut Perfect, that was just that i was looking for. I see how it works now. Thanks. – audiojames Feb 14 '17 at 21:08
I spoke too soon, this does not seem to work, and just produces some error. unless I am calling the function incorrectly – audiojames Feb 14 '17 at 21:18
1

Function names starting with a capital letter are, by convention, reserved for constructors. `this.starts_at` is a string, calling Date methods on a string won't work, you need to convert it to a Date beforehand. – RobG Feb 14 '17 at 23:35
@RobG, thanks for your point!. I updated my answer. – Mihai Alexandru-Ionut Feb 15 '17 at 07:15

score 0 · Answer 2 · edited May 23 '17 at 12:09

See Format date to MM/dd/yyyy in javascript

First, parse it to a date with

var date = new Date(this.starts_at);

Second, print your date as desired

var dateStr = (date.getDate() + '/' + (date.getMonth() + 1) + '/' +  date.getFullYear())

You will get "6/29/2015"

For your specific instance, it would be something like

 $(document).ready( function() {
   $.getJSON( 'opp.php', function(data) { 
     $.each(data.opportunities, function() { 
       var date = new Date(this.starts_at);
       var dateStr = (date.getDate() + '/' + (date.getMonth() + 1) + '/' +  date.getFullYear())
       $("table#outtodaytomorrow").append("<tr><td>" + this.number + "</td><td>" + dateStr + "</td></tr>");
     });
   });
 });

Breaking up the component into different pieces of memory such as "date" and "dateStr" makes it easier to read and understand.

Great, thanks Zak. This looks like just what I was after. It might be a stupid question, but how would I go about adding this into my code so that it works for each line of the table? — audiojames, Feb 14 '17 at 20:54

score 0 · Answer 3 · answered Feb 14 '17 at 20:46

0

You could use MomentJs to parse the first input and then format it to your desired format.
Something like :

$(document).ready( function() {
$.getJSON( 'opp.php', function(data) { 
    $.each(data.opportunities, function() { 
        $("table#outtodaytomorrow").append("<tr><td>" + this.number + "</td><td>" + moment(this.starts_at).format("DD/MM/YYYY") + "</td></tr>");
    });
});
});

answered Feb 14 '17 at 20:46

Nicolas

7,276
3
17
40

This can be done in native javascript in 2 lines. 1 if you're crafty enough. No need to import an unnecessary library. – Zakk Diaz Feb 14 '17 at 20:48
Everythings can be done in native javascript. The point here is to save time and make the code cleaner. – Nicolas Feb 14 '17 at 20:54

How to display Json date string as DD/MM/YYYY in a table

3 Answers3