How to use date plugin jQuery timeago example?

In this example, I will show you how to implement timeago jQuery plugin in a asp.net MVC project. It makes easy automatically updating datetime like 5 minutes or 15 hours ago or 1 day ago etc…

Advantages of timeago jQuery plugin:

Use it in HTML5 standard tags.

·         If your web page opened 5 minutes ago, it automatically refreshes time.

·         E.g. 5 minutes ago or 15 hours ago etc...

·         It uses page caching and is not calculated on server side.

jQuery timeago example:

Download timeago jQuery plugin and reference it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="~/Scripts/timeago/jquery.timeago.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
        jQuery("time.timeago").timeago();
    });
</script>

@Html.Timeago(Model.CreatedOn.Value)

 Html Helper class:

Create an html helper class, copy and paste the following code.

public static MvcHtmlString Timeago(this HtmlHelper helper, DateTime dateTime)
        {
            var tag = new TagBuilder("abbr");
            tag.AddCssClass("timeago");
            tag.Attributes.Add("title",dateTime.ToString("s"));
            tag.SetInnerText(dateTime.ToString());
            return MvcHtmlString.Create(tag.ToString());
        } 

Output: