Implement Jquery Timeago with PHP

Abhigyan Singh 14th Jul 2020

Almost, all social media websites change posting time frequently without refreshing the web page. You can see these phrases: seconds ago, one minute ago, two minutes ago and hours ago in the same post while time is passing and the page did not reload. Jquery developers developed timeago plugin to implement this feature in your site.

The best two plugins is:

  1. Timeago plugin
  2. Livestamp.js plugin

jQuery Timeago plugin :

It automatically updates fuzzy timestamps. It receives the time in an ISO 8601 timestamp.

How to implement Timeago plugin :

Step1 : include jquery.js and the timeago.js files in the head of your file

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.timeago2.js"></script>

Step2 : Attach the timeago functionality in DOM ready to time elements that have a class named 'ago' or any name you choose.

$(document).ready(function() {

After these javascript lines, every time element with 'ago' class and an ISO 8601 timestamp in the datetime attribute will be changed to view time ago phrases. So, this element :

<time class="ago" datetime="2016-3-22T09:24:17Z">March 22, 2016</time

Will be converted into:

<time class="ago" datetime="2016-3-22T09:24:17Z" title="March 22, 2016">6 months ago</time>

Timeago Options :

Allow future :

You can allow timestamps in the future by changing the allowFuture setting to true.

jQuery.timeago.settings.allowFuture = true;

Disable past times :

You can disable past timestamps by changing the value of allowPast setting to false and add a phrase that appears when the timestamp in the past.

jQuery.timeago.settings.strings.inPast = "time over";
jQuery.timeago.settings.allowPast = false;

jQuery Livestamp plugin:

It is a Jquery plugin that automatically updates time ago text depending on Moment.js. It can receive the time in UNIX timestamp and ISO 8601 timestamps.

How to implement Livestamp plugin :

Load jquery.js library, Moment.js, and livestamp.js in the head of your file

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/livestamp.min.js"></script>

Once you loaded those files, the livestamp.js plugin will update any element with a data-livestamp attribute that has correct Unix timestamp into the desired format.

<span data-livestamp="1475383267"></span>.
<span data-livestamp="2015-3-22T09:24:17Z"></span>

Will be updated to

<span>4 hours ago</span>
<span>2 years ago</span>

Livestmp.js allows future time by default .

If you have any questions you can make a comment.Have a nice code.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk