Servage Magazine

Do you want a smart system to show timestamps in a reader-friendly way? For example to display a timestamp as “2 minutes ago”, instead of the actual year, month, day, hours, minutes and seconds. For older timstamps it’s nice with “Yesterday” or “Last week”, while very old ones should simple get the actual timestamp shown. This way of displaying times is very popular e.g. on social media sites and others, which features streams of often updated content. It looks nice and provides a quicker understanding of the time factor.

You can implement this in two ways. Either your convert the timestamp on the server, or in the client. The advantage of doing it dynamically in the client is that it can adjust without reloading from the server. Here is an example script which can do this in Javascript:

/**
	Function which updates any abbr tags with class timestap
	and data-date attributes

	@params classname: class to look for
	@params pageloadtime: time when the page loads
*/
function updateDates(classname)
{
	var timestring; // holds time value
	var diff; // holds the difference
	var now = new Date(); // current time
	var newstring = ""; // new datetime caption to replace current caption
	var gmtHours = -now.getTimezoneOffset()/60;

	$('abbr.'+classname).each(function()
	{
		timestring = new Date($(this).attr("data-date"));
		timestring = timestring.getTime();

		diff = Math.ceil(now.getTime() - timestring);
		newstring = diffTimeString(diff);

		if(newstring != null)
			$(this).html(newstring);

	});
}

/**
	Function to determine the string to use
	to display time difference

	@params time : time difference since pageload
*/
function diffTimeString(time)
{
	var result = null;
	time = Math.ceil(time/1000);// round up to closest second
	/*
		Some Concepts
		- Less than about 50 seconds, then use seconds counter
		- Over a minute round to nearest minute
		- At 50 minutes (3000), to nearest hour (3600)
		- After that to the nearest hour until 24 hours
		- Maybe do day/week later
	*/

	if(time > 2) // minimum 2 seconds, otherwise not worth it
	{
		if(time < 50)
		{
			result = time+' seconds ago';
		}
		else if(time >= 50 && time < 3000)
		{
			time = Math.ceil(time/60);
			if(time == 1)
				result = time+' minute ago';
			else
				result = time+' minutes ago';
		}
		else if(time > 3000)
		{
			time=Math.ceil(time/3600);
			if(time == 1)
				result ='about an hour ago';
			else
				result = time+' hours ago';
		}
		else
		{
			result = null;
		}
	}

	return result;
}

$(document).ready(function()
{
	$(this).everyTime("5s",function()
	{
		updateDates('timestamp');
	});
});

Take a look at the demo of the proposed script.