How to display a date in moments ago format

Question

I have binded a date to an tag using razor, in the following way.

<h4>@updates.UpdatedDate</h4>

This would display the date in the following manner:

10/1/2016 8:30:02 AM

However, I would need the date to be displayed as

12 days ago

Moments ago format. And i know we can use moment.js for this. But do i call the javascript function on the value

Answer 1

You have a few ways you could do this in the MVC way (server-side), instead of attempting to call a JavaScript function (client-side):

Option 1: Adding a property to your model/view model that does the conversion for you:

public HtmlString MomentDate
{
    get
    {
        string convertedDate = // Write your UpdatedDate conversion logic here.
        return new HtmlString(convertedDate);
    }
}

Option 2 Write a custom HtmlHelper extension

public static class HtmlHelperExtensions
{
    public static HtmlString MomentDateFormat(this HtmlHelper helper, DateTime value)
    {
        string convertedDate = // Write your UpdatedDate conversion logic here.
        return new HtmlString(convertedDate);
    }
}

And then calling it in your razor view:

<h4>@Html.MomentDateFormat(updates.UpdatedDate)</h4>

I would generally go with option 2, but I'm going to get into the semantics of why.