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="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/livestamp/1.1.2/livestamp.min.js"></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> 
<script> 
      $('#datetimenw').attr('data-livestamp', new Date().toLocaleString());
</script> 

Output:

Past datetime example:

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

Output:

Future date example:

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

Output:

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="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js"></script>
<script>
  $('#eventExample').on('change.livestamp', function() {
   $.notify("Time Updated", "success");
  }).livestamp();
</script>

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

Enjoy, cheers !!