Technology Blog

Partners

WhichIsBest

Ads

ads
WhichIsBest

Monday, October 10, 2011

Facebook like friendly time with GMT and UTC using PHP & Javascript

Usually when we want to insert timestamps in a database. We will either put the column default as 'Current Timestamp' or insert the value 'date("Y-m-d H:i:s")' into that column. But both the methods will result in inserting only the server time in the database and visitors from all over the world will see the same server time in the website.

So it is good practice to insert only the GMT time in the database and while displaying, convert it into the user's local time zone and display to them.

1 ) To get the GMT time stamp of current time in PHP, use the following,

$GMT_Timestamp=gmdate("Y-m-d H:i:s", time());
//Insert '$GMT_Timestamp' in the timestamp column of the database

Insert the above value in the timestamp column of table in database. This will give same GMT time value irrespective of server location or client location.

2 ) When you fetch the data from database, display it in the UTC format to the client like the following code,

//Fetch '$GMT_Timestamp' from the database table
$UTC_Time=date('Y-m-dTH:i:s+0000',strtotime($GMT_Timestamp));
//Display '$UTC_Time' to client and use javascript to make it to local time and friendly text
echo "<span class='unformattedtime'>".$UTC_Time."</span>";

3 ) Add the following javascript code in the head part of the webpage to convert the UTC formatted text into local time and display it in friendly text format.

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="javascript">
function getValidDate(ivDate){
var arrDateTime = ivDate.split("T");
var strTimeCode = arrDateTime[1].substring(0,arrDateTime[1].indexOf("+"));
var valid_date = new Date();
var arrDateCode = arrDateTime[0].split("-");
valid_date.setYear(arrDateCode[0]);
valid_date.setMonth(arrDateCode[1]-1);
valid_date.setDate(arrDateCode[2]);
var arrTimeCode = strTimeCode.split(":");
valid_date.setHours(arrTimeCode[0]);
valid_date.setMinutes(arrTimeCode[1]);
valid_date.setSeconds(arrTimeCode[2]);
return valid_date;
}
var month=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function toFormattedDate(gmdate){
var date=getValidDate(gmdate);
var offset=parseInt(date.getTimezoneOffset());
var sec_diff = (((new Date()).getTime()+(offset*60*1000)-date.getTime())/1000);
var day_diff = Math.floor(sec_diff / 86400);
if(sec_diff<60){
return "Just Now";
}else if(sec_diff<120){
return "1 minute ago";
}else if(sec_diff<3600){
return ""+Math.floor( sec_diff / 60 ) + " minutes ago";
}else if(sec_diff<7200){
return "1 hour ago";
}else if(sec_diff<86400){
return Math.floor( sec_diff / 3600 ) + " hours ago";
}else if(day_diff==1){
return "yesterday";
}else if(day_diff<7){
return day_diff + " days ago";
}else if(day_diff<31){
return Math.ceil( day_diff / 7 ) + " weeks ago";
}else{
return month[date.getMonth()]+" "+date.getDate()+", "+date.getFullYear();
}
return date;
}
$(document).ready(function(){
$('.unformattedtime').each(function(index) {
$(this).attr('alt',$(this).html());
$(this).attr('title',$(this).html());
$(this).html(toFormattedDate($(this).html()));
});
});
</script>

The above code will replace all the UTC format text given inside a span with class 'unformattedtime' to the friendly text format as given below.

<span class='unformattedtime'>2011-10-08T08:43:48+0000</span>

will be converted to friendly time format like

<span class='unformattedtime'>21 minutes ago</span>

This method will be regardless of the server and the client location. The displayed time to the user will be calculated for their local time zone and be displayed. So visitors from all over the world will see the time according to their timezone.

Live Demo | Download Code

1 comment:

  1. Hi,

    I would suggest the following change in the getValidDate() function:

    var strTimeCode = "";
    if (arrDateTime[1].indexOf("+") > 0)
    strTimeCode = arrDateTime[1].substring(0, arrDateTime[1].indexOf("+"));
    else
    strTimeCode = arrDateTime[1];
    If my time doesn't contain any timezone information....

    ReplyDelete

WhichIsBest
WhichIsBest