How To Create Timeago Functionality using jQuery

javascript| Updated on July 27, 2024

Most Probably you have seen “Posted 4 mins ago ” or “2 days ago” in facebook post and also in WordPress post, in this tutorial we will create the same functionality using jquery, for this we will use jquery third-party plugin called timeago.

Steps by Step Guide to Create Timeago functionality using Jquery:

If you are new to Jquery or want to learn some basics before starting this tutorial, I must recommend to please checkout learn-javascript-from-scratch and jquery-step-by-step-tutorial-for-beginners

So, here I am going to show how can be done this by using Jquery.

So let’s get started…

STEP-1:

First of all, you have to add the jquery library to your page:

<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

STEP-2:

Create a Blank HTML file and put following code:

<body>

    <div class="container">

        <div class="card" style="width: 40rem;margin-top: 20vh;margin-left: 40vh;">

            <div class="card-body">
                <h5 id="timer1" class="card-title">Timeago demo</h5>
                <p class="card-text">Original Date:August, 16th 2018 </p>
                After Using Timeago ::
                <time class="timeago" datetime="2018-08-16T09:24:17Z"></time>

                <button type="button" id="update" class="btn btn-secondary">Update</button>
            </div>
        </div>

    </div>
</body>

STEP-3:

Include time-ago plugin after jquery script.

<script src="jquery.timeago.js"></script>

STEP-4:

After ending HTML tag add some Javascript code including with script tag as follow:

<script>
        $(document).ready(function () {
            //init timeago 
            $(".timeago").timeago();

            //Update timestamp programatically 
            $('#update').on('click', function () {

                $(".timeago").timeago("update", new Date());

            })
        });
    </script>

This will turn all <time> elements with a class of timeago and a datetime attribute formatted according to the ISO 8601standard

If you want to update a timestamp programatically later, call the update function with a new ISO8601 timestamp of Dateobject

That’s it, Now you are done. If you find any issue checkout complete source code given below

Complete source code:

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jquery Timeago</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
</head>

<body>

    <div class="container">

        <div class="card" style="width: 40rem;margin-top: 20vh;margin-left: 40vh;">

            <div class="card-body">
                <h5 id="timer1" class="card-title">Timeago demo</h5>
                <p class="card-text">Original Date:August, 16th 2018 </p>
                After Using Timeago ::
                <time class="timeago" datetime="2018-08-16T09:24:17Z"></time>

                <button type="button" id="update" class="btn btn-secondary">Update</button>
            </div>
        </div>

    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="jquery.timeago.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>

    <script>
        $(document).ready(function () {
            //init timeago 
            $(".timeago").timeago();

            //Update timestamp programatically 
            $('#update').on('click', function () {

                $(".timeago").timeago("update", new Date());

            })
        });
    </script>
</body>

</html>

Download Source Code

View Demo

Conclusion:

Thanks for reading.

Do let me know If you face any difficulties please feel free to comment below we love to help you.if you have any feedback suggestion then please inform us by commenting.

Don’t forget to share this tutorial with your friends on facebook and twitter.