This is a dirty JSFiddle version of my web app, however, I do not understand how to properly adjust the date from the Unix TimeStamp, all I want to display is the month, day, and year.

Any help would be greatly appreciated it!

/

Here is the Code:

    $(function() {
    $.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "/?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>\
                    ");
            }
        }
    });
});​

This is a dirty JSFiddle version of my web app, however, I do not understand how to properly adjust the date from the Unix TimeStamp, all I want to display is the month, day, and year.

Any help would be greatly appreciated it!

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>\
                    ");
            }
        }
    });
});​

• javascript
• api
• date
• instagram

3 Answers 3

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/

with the previous answer I was getting "NaN" in a lot of cases.

Instagram uses a Unix timestamp and I found this script to work the 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 a jsfiddle: http://jsfiddle.net/jgknott/V5TCs/

Here's a nice angularjs factory i made for displaying dates exactly like instagram does:

    .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;
    };
}])