How to show time as x-minute ago in your website

Posted By

How to show time as x-minute ago in your website

Have you ever wondered how to show time as x-minute ago in your website?

Displaying date as DD/MM/YYYY hh:mm:ss is very common, but due the frequency of content posted on your website there could be a need to show time as x-minutes ago.

Best method to this by using simple javascript libraries, which saves you a lot of server side coding.

Are you wondering how

Ok let’s begin,

You can achieve this by moment.js and livestamp.js, off course you need jquery too!

moment.js is open-source and free to use. It is a lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.

Benefits of moment.js:

  • It is minified, very small in size
  • Has variety of options to parse and validate datetime.
  • Works on all browser
  • You can easily set it up in node.js, NuGet
  • You can easily manipulate its behaviour

Livestamp.js is a simple plugin that provides auto-updating timeago text to your timestamped HTML elements using Moment.js

Benefits of livestamp.js:

  • Just as moment, it is also minified, and very small in size
  • It updates itself as time goes by
  • No extra javascript or HTML required
  • It can also parse future dates like "in 30 minutes"
  • You can control its trigger event

How to get started

Setting up this functionality is not very hard, that’s why I recommend using this in your projects.

Include the following script before the closing tag of your website

<script src=""></script> 
<script src=""></script> 
<script src=""></script>

Now you are almost there to show date time as x-minute ago in your website.

Lets talk about its usage now.

Add data-livestamp to the HTML element in which you want to show datetime.

I would recommend using <span> because its a inline tag.

Remember that you have to keep this tag empty, otherwise its content would be replaced

by something like ‘x-time ago’

Few examples:

Current datetime example:

<span id="datetimenw"></span> 
      $('#datetimenw').attr('data-livestamp', new Date().toLocaleString());


Past datetime example:

<span data-livestamp="11/28/2017, 11:55:55 AM"></span>


Future date example:

<span data-livestamp="12/20/2017, 11:55:55 AM"></span>


Available Events

change.livestamp event is available for your use, which is triggered right before the time is updated.

Let’s see a basic usage of this event.

<span id="eventExample"></span>
<script src=""></script>
  $('#eventExample').on('change.livestamp', function() {
   $.notify("Time Updated", "success");

By following steps defined in this article, you will be able to include x-minute ago functionality in your website.

Enjoy, cheers !!

Shakti Singh Cheema