ASP.NET MVC: Helper method to display date ranges

I have events web site where I want to show events start and end time to visitors. I wrote simple extension method called DisplayTimeRange() to display event time range on user-friendly manner. My goal is to show times as 01.01.2012 10:00 – 14:00 and 01.01.2012 15:00 – 01.03.2012 18:00. It’s practically displaying time ranges is shortest possible way. In this posting I will show you how to do it using extension method.

For events that happen only on one date I want output like this:

DisplayDateRange(): Event covers only one date

For events that cover more than one date I want output like this:

DisplayDateRange(): Event covers more than one date

Here is my extension method for HtmlHelper. I called it DisplayDateRange and currently it generates output like shown above (styling depends on you).

public static MvcHtmlString DisplayDateRange(this HtmlHelper helper, DateTime from, DateTime to)

{

    var buffer = new StringBuilder(100);

 

    buffer.Append(@"<div class=""dateRange"">");

 

    buffer.Append(from.ToShortDateString());

    buffer.Append(" ");

    buffer.Append(from.ToShortTimeString());

    buffer.Append(" - ");

 

    if (from.Date == to.Date)

    {

        buffer.Append(to.ToShortTimeString());

    }

    else

    {

        buffer.Append(to.ToShortDateString());

        buffer.Append(" ");

        buffer.Append(to.ToShortTimeString());

    }

 

    buffer.Append("</div>");

 

    return new MvcHtmlString(buffer.ToString());

}

This extension method can be easily extended also to nullable DateTime types if you need it.

DateTime formatting may seem not so perfect but it was the only way how to avoid weird long date and time outputs with seconds (we really don’t need seconds here). If you have good idea about how to format dates shorter in code then feel free to drop me a comment here.

6 Comments

  • Does it handle formatting as I would change the date you display to be dd/mm/yyyy

  • It is using default formatting based on current culture. You can set it in web.config file, read from browser or set in code. If you want to specify format in view (not sure why you should need it) then you can add additional argument to extension method.

  • something like this, maybe?
    warning: untested code; feel free to adapt for DRY

    public static MvcHtmlString DisplayDateRange(this HtmlHelper helper, DateTime from, DateTime to)
    {
    string dateFormat = from.Date == to.Date
    ? @"&lt;div class=""dateRange""&gt;{0:g} - {1:t}&lt;/div&gt;"
    : @"&lt;div class=""dateRange""&gt;{0:g} - {1:g}&lt;/div&gt;";

    return new MvcHtmlString(String.Format(dateFormat, from, to));
    }

  • Looks good, but why not using Tag?

  • Thanks for shortcut, Dirk! The code looks a little bit hard to read for beginners but your idea is very good. :)

  • Thanks for question, Igor! There are still browsers that doesn't support HTML5 and I can't miss users with these browsers.

Comments have been disabled for this content.