Correct Instagram Date Display

Question

This is a dirty version of my JSFiddle web application, however I don’t understand how to set the date correctly with Unix TimeStamp, all I want to display is month, day and year.

Any help would be greatly appreciated!

http://jsfiddle.net/89YCe/

Here is the code:

$(function() { $.ajax({ type: "GET", dataType: "jsonp", cache: false, url: "https://api.instagram.com/v1/tags/crookedspaces/media/recent/?access_token=16741082.1b07669.121a338d0cbe4ff6a5e04543158a4f82", success: function(data) { console.log(data); //OKAY, now lets get to the pretty stuff, INSTAGRAM PEEKTARS. for (var i = 0; i < 5; i++) { $(".instagram").append("\ <div class='instagram-feed'>\ <img class='instagram-image' src='" + data.data[i].images.standard_resolution.url +"' width='325px'/>\ <div class='igHover2'>\ posted by: "+data.data[i].user.username+"<br />\ posted on: "+Date(data.data[i].created_time).toString()+"<br />\ </div />\ </div>\ "); } } }); });​ 

Answer 1

Here you are:

 $(function() { $.ajax({ type: "GET", dataType: "jsonp", cache: false, url: "https://api.instagram.com/v1/tags/crookedspaces/media/recent/?access_token=16741082.1b07669.121a338d0cbe4ff6a5e04543158a4f82", success: function(data) { console.log(data); //OKAY, now lets get to the pretty stuff, INSTAGRAM PEEKTARS. for (var i = 0; i < 5; i++) { var date = new Date(parseInt(data.data[i].created_time) * 1000); $(".instagram").append("\ <div class='instagram-feed'>\ <img class='instagram-image' src='" + data.data[i].images.standard_resolution.url +"' width='325px'/>\ <div class='igHover2'>\ posted by: "+data.data[i].user.username+"<br />\ posted on: "+(date.getMonth()+1)+"/"+date.getDate()+"/"+date.getFullYear()+"<br />\ </div />\ </div>\ "); date = null; } } }); }); 

And a live demo with this working http://jsfiddle.net/89YCe/2/

Answer 2

with the previous answer, I got "NaN" in many cases.

Instagram uses a Unix timestamp, and I found that this script works best:

  $(function() { $.ajax({ type: "GET", dataType: "jsonp", cache: false, url: "https://api.instagram.com/v1/tags/breathadvisor/media/recent/?access_token=16741082.1b07669.121a338d0cbe4ff6a5e04543158a4f82", success: function(data) { console.log(data); //OKAY, now lets get to the pretty stuff, INSTAGRAM PEEKTARS. for (var i = 0; i < 5; i++) { var date = new Date(data.data[i].created_time * 1000); var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; var year = date.getFullYear(); var month = months[date.getMonth()]; var date = date.getDate(); var time = month+', '+ date+' '+year ; $(".instagram").append("\ <div class='instagram-feed'>\ <img class='instagram-image' src='" + data.data[i].images.standard_resolution.url +"' width='325px'/>\ <div class='igHover2'>\ posted by: "+data.data[i].user.username+"<br />\ posted on: "+time+"<br />\ </div />\ </div>\ "); date = null; } } }); 

});

here's jsfiddle: http://jsfiddle.net/jgknott/V5TCs/

Answer 3

Here's a pretty angularjs factory i created to display dates in exactly the same way as instagram:

  .factory('displaydate', ['$filter', function($filter) { return function (date){ // Split timestamp into [ Y, M, D, h, m, s ] var actiondate = new Date(parseInt(date) * 1000); var today = new Date(); if(today.getDate() === actiondate.getDate() && today.getMonth() === actiondate.getMonth() && today.getYear() === actiondate.getYear()){ var hourssince = today.getHours() - actiondate.getHours(); var minutessince = today.getMinutes() - actiondate.getMinutes(); var secondssince = today.getSeconds() - actiondate.getSeconds(); if(hourssince > 0){ date = hourssince+'u'; }else if(minutessince > 0){ date = minutessince+'m'; }else{ date = secondssince+'s'; } }else{ var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds var diffDays = Math.round(Math.abs((today.getTime() - actiondate.getTime())/(oneDay))); if(diffDays >= 7){ date = Math.round(diffDays / 7)+'w'; }else{ if(diffDays == '0'){ diffDays = '1'; } date = diffDays+'d'; } } return date; }; }])