Change blog post publish time to relative time using Javascript

Well this not a physics lecture. Relative time means if the date matches the today's date then instead of showing the date itself the phrases like "Published Today" or "Several hours ago". This can be simply achieved with some lines of Javascript but you require a standard date and time format which is then passed in Javascript's date object. Have a look.

Date Formats

There are several ways Javascript's date object responds to. The ISO 8601 syntax (YYYY-MM-DD) is the most preferred way of JavaScript date format. Example 2015-08-25. Otherwise there are more than 20 date formats in Javascript, read them here. But in this tutorial I will use this format : 2015-03-25T12:00:00. Because this is what I use often.

Code

See the Pen Relative time by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

First create a Javascript function.

function getRelative(e){
}

The argument e is the date passed in function. Next is to create 2 new date objects. First one will get the today's date and other one for the date passed.

var DateNow=new Date(),
    postDate=new Date(e);

Once you pass the date in object then it will read the format and convert it into a new format. Now we will check if this post is published today or yesterday.

var isToday = DateNow.toString().substr(0, 15) == postDate.toString().substr(0, 15) ? true : false,
    isYesterday = DateNow.getFullYear() - postDate.getFullYear() == 0 && (DateNow.getMonth() - postDate.getMonth()) == 0 && (DateNow.getDate() - postDate.getDate()) == 1 ? true : false;

For today case, both dates were converted to string to get substr method then their dates were matched, if condition is true then variable isToday is set to true or false.

While yesterday case have a bit difference. Every date objects have some methods, getFullYear returns YYYY which is a four digit integer, if their difference is zero then simply this is the current year. Same done with months by using .getMonth() method which also returns 0-11. While getDate() method should have a difference equal to 1 which says that this post is 1 day older.

If passed date is older than one day then a few lines more added to make it work.

phrase += 'Published '
var pubYear = DateNow.getFullYear() - postDate.getFullYear(),
    pubMonth = DateNow.getMonth() - postDate.getMonth(),
    pubDay = DateNow.getDate() - postDate.getDate();
if (pubYear > 0) {
    phrase += pubYear == 1 ? pubYear + ' Year' : pubYear + ' Years';
}
if (pubMonth > 0) {
    phrase += pubMonth == 1 ? pubMonth + ' Month' : pubMonth + ' Months';
}
if (pubDay > 0) {
    phrase += pubDay == 1 ? pubDay + ' Day' : pubDay + ' Days';
}
phrase += ' ago'
}
return phrase;

Same technique is applied to get the difference of current date and passed date and formed a phrase like Published 2 Years 3 Months 20 Days ago.

In Blogger

This is something Blogger do not provide natively, however if your Blogger template have timeStamp data tag then you can simply change the time or date format but nothing like relative time is mentioned. Blogger provides a data layout tag which have time and date pattern, once you extract day, month and year than all you need is to match with current attributes.

<data:post.timestampISO8601/>

The above tag returns the date and time in this way:

2011-04-12T03:41:00-04:00

This is an standard way of displaying the date and time for Javascript date object, this makes easy to process the stuff. Get the current date and try relative possibilities with published date. To put this on Blogger you need to execute function in the loop of var post. Like this I guess

<script>
document.write(getRelative('<data:post.timestampISO8601/>'));
<script>

The reason is that data:post.timestampISO8601 is available only in post loop.