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