On a lot of web applications and websites you are able to see dates and read them easily without knowing which day is today or without knowing which day is the 25 of Juni, April etc. This feature is achieved in the browser by simply starting from the original date and creating a readable description of the different of the date and the current time. They are usually updated dinamically when you are on the website too.
In case you want to implement such a feature on your app, we recomend you to use an open source library for this. We have collected 5 of the most awesome, known and easy to uses libraries that allow you to display dates in the time ago format. All of them achieve the same and most of them require you to provide the dates in the markup with the ISO 8601 format, but factors as support and how well is the library maintained give them a different place in our top. Enjoy it !
5. TinyAgo.js
TinyAgo.js isn't a huge library, but a tiny utility (180 bytes minified) to convert timestamps to relative time. This is perfect if you don't want to include huge libraries to achieve something simple. The library provides one function ago(), which expects an argument that is a timestamp in milliseconds (such as the return value of the Date.getTime() method), and returns a string with the relative time:
var d = new Date('January 1, 2014');
console.log(ago(d.getTime())); // -> '7 months' (assuming it's August 2014)In case you want to achieve the same that the other libraries, then your time elements should display
<time class="timeago" timestamp="1499014713896">July 2, 2017 </time>
<script>
$(".timeago").each(function(i,el){
var element = $(el);
// Change text of element to a human readable date with ago
// like 2 minutes, 2 hours
element.text(ago(element.attr("timestamp")));
});
</script>4. Livestamp.js
Livestamp.js is a very simple, unobtrusive jQuery plugin that provides auto-updating timeago text to your timestamped HTML elements using the JavaScript library Moment.js as a dependency. The first thing you need to do is to download the dependencies and load them before the plugin. You'll need jQuery (>= 1.7) and Moment.js (>= 1.7). Once you've got everything, put this somewhere in your page:
<script src="jquery.js"></script>
<script src="moment.js"></script>
<script src="livestamp.js"></script>You won't need to write extra code to initialize it. Just use a <span> with the data-livestamp attribute set to the desired Unix timestamp (in seconds), like this:
You discovered Livestamp.js <span data-livestamp="1499012147"></span>3. Smart Time Ago
Smart Time Ago is a little jQuery library to update the relative timestamps in your document intelligently. (e.g "3 hours ago"). Smart Time Ago will check and update the relative time every 60000 millisecond (60 seconds) in the scope you specify at the beginning. Latter it will check the newest time in your scope then tune the checking time interval to a proper value.
By default Smart Time Ago will keep watching on the time elements with a class of timeago and a ISO8601 timestamp in the datetime attribute:
<div id="time-labels">
<time class="timeago" datetime="2012-07-18T07:51:50Z">about 8 hours ago</time>
</div>The JavaScript initializator expects the parent element where the timeago elements are located. That means that you can provide a context or the entire body:
// Select context of the time elements
$('#time-labels').timeago();
// Or in all your document
$('body').timeago();So every element with the timeago class and the datetime attribute will automatically have a readable date description. For example, if the newest time in the scope you specify is '2 hours ago'. There is no need to check and update the relative time every 60 seconds. Instead, Smart Time Ago will automaticly make the checking time interval longer to 30 minutes.
2. Timeago.js
timeago.js is a tiny library (2kb) used to format date with an human readable date description eg: '3 hours ago' without dependencies. It supports automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago"). All you need to do to use this library is to load the source script:
<script src="dist/timeago.js" type="text/javascript"></script>Then, as a standard, the plugin works on the <time> tags in HTML5, that means that you need to format the dates on your server side using the ISO 8601 format. and the plugin will update its content with a human readable format. For example, you would provide the following markup from the server side in your document:
<time class="timeago" datetime="2008-07-17T09:24:17Z">
July 17, 2008
</time>Once the DOM is ready, you can use JavaScript to initialize it:
timeago().render(document.querySelectorAll('.timeago'));And the time element will be updated with:
<!-- The date may change till the current date -->
<time class="timeago" datetime="2008-07-17T09:24:17Z" title="July 17, 2008">
9 years ago
</time>1. jQuery Time Ago
Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago"). It's the jQuery version of Timeago.js. All you need to do to use this library is to include jQuery and the plugin using a script tag:
<!-- jQuery -->
<script src="jquery.min.js" type="text/javascript"></script>
<!-- Timeago -->
<script src="jquery.timeago.js" type="text/javascript"></script>Then, as a standard, the plugin works on the <time> tags in HTML5, that means that you need to format the dates on your server side using the ISO 8601 format. and the plugin will update its content with a human readable format. For example, you would provide the following markup from the server side in your document:
<time class="timeago" datetime="2008-07-17T09:24:17Z">
July 17, 2008
</time>And once the plugin loads, you will need to initialize it. It's recommended to simply add the class timeago to the element that will be dinamically updated with the readable format, so the initialization code would look like:
$(function() {
// Initialize timeago on all the <time> elements with the timeago class
$("time.timeago").timeago();
});Then, our time tag will be updated with:
<!-- The date may change till the current date -->
<time class="timeago" datetime="2008-07-17T09:24:17Z" title="July 17, 2008">
9 years ago
</time>Honorable mentions
Angular Timeago
This Angular directive/filter/service can be used for formatting date so that it displays how long ago the given time was compared to now.
React Timeago
React timeago is a very simple component for ReactJs that displays a human readable description from the difference of a date compared with now. React-timeago is a very simple component that takes a date prop and returns a span with live updating date in a time-ago format. The date will update only as often as needed. For timestamps below a minute away every second, for timestamps up to 5 minutes away every hour, and so on. React-TimeAgo does the minimum amount of updates necessary.
If you know another awesome library that allows you to format the dates in the browser in the time ago style, please share it with the community in the comment box.
