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:

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

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.