CODEWITHSUNDEEP
c#jqueryasp.netasp.net-mvctimeago
Gareth Quirke
Gareth Quirke

Reputation: 216

Datetime displayed using JQuery Timeago

I am trying to display my date using the timeago plugin. This is what I have so far:

<div class="container col-lg-12 col-md-12 col-xs-12 notifications-container">
@{
    foreach (var n in Model.Notifications)
    {
        <div class="row">
            <a href="@n.URL">
                 <div class="container col-lg-8 col-md-10 col-xs-12">
                    <h2>@n.Title</h2>
                    <h5>@n.ShortDescription</h5>
                    <h5 id="date-time"></h5>
                    <h5>
                        <time class="timeago" datetime="@n.Time.ToString("s", System.Globalization.CultureInfo.InvariantCulture)"> @n.Time </time>
                    </h5>
                    <script>

                        $(document).ready(function () {
                            $("time.timeago").timeago();
                        });
                    </script>
                </div>
            </a>
        </div>
    }
}

It isn't converting my datetime, Not sure if I need to change the format of it so timeago can use it.

Update: I got it working this way and the DateTime passed in this scenario is of type UTC.Now

There is one bug that I have yet to fix which shows that all entries were made about an hour ago even though some of them were a couple of seconds ago..

Upvotes: 2

Views: 1779

Answers (1)

Hackerman
Hackerman

Reputation: 12305

We need to add to your project as a workaround, because, just works with dates in ISO 8601 format:

You need to change this:

<h5 id="date-time">@n.Time</h5>

To this: 

<h5 class="date-time">
 <time class="timeago" datetime="">@n.Time</time>
</h5>

And your javascript code, to this one:

$(document).ready(function() {
  var dateAux;
  $(".timeago").each(function(i,item){
      dateAux = moment($(item).html(),'DD-MM-YYYY hh:mm:ss');
      $(item).attr('datetime',dateAux.toISOString());
  })  
  $("time.timeago").timeago();
});

Working fiddle: https://jsfiddle.net/jn233dk4/1/

Upvotes: 3

Related Questions