jQuery & PHP Convert Date time to Facebook Style TimeAgo

Whenever a user sees a date or time, he/she start doing comparisons between current time and given time. So it takes some more brain resources to do time difference calculations. Facebook knows about this lazy human behavior, that’s why it always shows date time in the following format less than a minute ago 17 minutes…

By.

•

min read

Whenever a user sees a date or time, he/she start doing comparisons between current time and given time. So it takes some more brain resources to do time difference calculations. Facebook knows about this lazy human behavior, that’s why it always shows date time in the following format

less than a minute ago
17 minutes ago
1 Year ago

Instead of

30 May 2018 15:35:47
30 May 2018 15:18:33
23 May 2017 09:28:23

Method for jQuery

Here we will discuss a jQuery plugin to convert these traditional timestamps to facebook way.

See demo here

Step 1) Include jQuery and Time Ago plugin

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.6.3/jquery.timeago.js"></script>

Step 2) Add HTML having traditional Timestamps

<time class="timeago" datetime="1994-07-05 12:00:00"></time>
<span class="timeago" title="2018-04-17 22:33:26"></span>

 

Step 3) Now we will call time ago function

<script type="text/javascript">
   jQuery(document).ready(function() {
	 $(".timeago").timeago();
   });
</script>

 

Complete HTML will look like as follow:

<html lang="en">
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <title>Facebook Style Datetime</title>
	    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.6.3/jquery.timeago.js"></script>
	    <script type="text/javascript">
	    jQuery(document).ready(function() {
	        $(".timeago").timeago();
	    });
	    </script>
	</head>

	<body style="text-align:center">
	    <h1><a href="http://FreakyJolly.com" target="_blank" >FreakyJolly.com</a> Demo was created <b><time class="timeago" datetime="2018-05-30 11:36:00"></time></b></h1>
	    <h1><a href="http://Google.com" target="_blank" >Google.com</a> was created <b><time class="timeago" datetime="1998-09-04 12:00:00"></time></b></h1>
	    <h1><a href="http://Amazone.com" target="_blank" >Amazone.com</a> was created <b><time class="timeago" datetime="1994-07-05 12:00:00"></time></b></h1>
	</body>
</html>

 

More sources

https://github.com/rmm5t/jquery-timeago

http://timeago.yarp.com/

Method in PHP

We can use following PHP function convert DateTime stamp into time ago:

function get_time_ago( $time )
{
    $time_difference = time() - $time;

    if( $time_difference < 1 ) { return 'less than 1 second ago'; }
    $condition = array( 12 * 30 * 24 * 60 * 60 =>  'year',
                30 * 24 * 60 * 60       =>  'month',
                24 * 60 * 60            =>  'day',
                60 * 60                 =>  'hour',
                60                      =>  'minute',
                1                       =>  'second'
    );

    foreach( $condition as $secs => $str )
    {
        $d = $time_difference / $secs;

        if( $d >= 1 )
        {
            $t = round( $d );
            return 'about ' . $t . ' ' . $str . ( $t > 1 ? 's' : '' ) . ' ago';
        }
    }
}

Called as

echo get_time_ago( time()-5 ).'<br>';
echo get_time_ago( time()-60 ).'<br>';
echo get_time_ago( time()-3600 ).'<br>';
echo get_time_ago( time()-86400 ).'<br>';
echo get_time_ago( time()-2592000 ).'<br>';
echo get_time_ago( time()-31104000 ).'<br>';
echo get_time_ago( strtotime("2013-12-01") );

Output will be

about 5 seconds ago
about 1 minute ago
about 1 hour ago
about 1 day ago
about 1 month ago
about 1 year ago
about 2 years ago

Source: https://www.w3schools.in/php-script/time-ago-function/

 

Leave a Reply

Your email address will not be published. Required fields are marked *