Sometimes we need to create a comment system in our web application, and to show time elapsed of the comment to the user when page is loaded, so here I will explain you step by step procedure to show elapsed time of the comment or item which get's updated dynamically from client side using jQuery.

I assume you have already got the date comment created and you have the current time, then you can follow these steps

1.Using SQL query get the difference between 2 dates in SQL,

Datediff(s,NR.CreatedDate,GETDATE()) AS DateDiffReply

Or in C# way

    //get date from database 
    var CreateDate= Model.CreatedDate;

    TimeSpan span = (DateTime.Now - CreateDate);

   //span.Seconds, gives seconds, span.Days gives days 
   //span.Hours gives Hours, span.Minutes gives minutes
   // we will use Seconds
     var ItemDateDiffreply=span.Seconds

2. Now get the above value in your .cshtml Razor View using C# Controller in Modal:

<div>Text Data here <br/>
<span datediff="@item.DateDiffReply" class="nDateTime" ></span>
</div>

for example, Razor code would be like

<span class="nLocalDateTIme" datediff="1750"></span>

Add a button to call the jquery time:

<input type="button" id="btnRefresh" value ="Refresh"/>

4. Using jQuery code we will get "dateDiff" and convert it into minutes, seconds or hours

$("#btnRefresh").click(function(){
 var sdate = $(".nLocalDateTIme").attr("datediff");
        $(".nLocalDateTIme").text(GetElapsedTime(sdate));

});

5. jQuery code as below to make it work

$("#btnRefresh").click(function(){
//alert("1");
 var sdate = $(".nLocalDateTIme").attr("datediff");
        $(".nLocalDateTIme").text(GetElapsedTime(sdate));

});

//Call after each 5 seconds , to update time
setInterval(function(){

 var sdate = parseInt( $(".nLocalDateTIme").attr("datediff"),10)+5;
 console.log(sdate);
 $(".nLocalDateTIme").attr("datediff",sdate);
  $(".nLocalDateTIme").text(GetElapsedTime(sdate));


}, 5000); 
function GetElapsedTime(seconds) {
//alert("2");
    var interval = Math.floor(seconds / 31536000);

    if (interval >= 1) {
        return interval == 1 ? "oneYearAgo" : interval + " " + "yearsAgo";
    }

    interval = Math.floor(seconds / 2592000);

    if (interval >= 1) {
        return interval == 1 ? "oneMonthAgo" : interval + " " + "monthsAgo";
    }
    interval = Math.floor(seconds / 86400);

    if (interval >= 1) {
        return interval <= 1 ? "yesterday" : interval + " " + "daysAgo";
    }

    interval = Math.floor(seconds / 3600);
    if (interval >= 1) {
        return interval <= 1 ? "anHourAgo" : interval + " " + "hoursAgo";
    }

    interval = Math.floor(seconds / 60);
    if (interval >= 1) {
        return interval <= 1 ? "aMinuteAgo" : interval + " " + "minutesAgo";
    }

    interval = Math.floor(seconds);
    if (interval >= 1) {
        return interval <= 1 ? "justNow" : interval + " " + "secondsAgo";
    }
    return "justNow";
}

here is the working fiddle link 

http://jsfiddle.net/6trje/1363/

The above code changes the text of elapsed time dynamically, as it is called repeatedly using jQuery setInterval function.

Usage of the above demo can be:

  1. When you want to show elapsed time to user change dynamically, then you can call the above jQuery code after a certain interval and it will update the elapsed time dynamically.For this, you would have to implement jQuery Ajax to server and get elapsed time, or update it based on time interval
  2. Load time of comment or item using jQuery