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 - start and end is at same date

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

DisplayDateRange - start and end are on different dates

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.

Liked this post? Empower your friends by sharing it!

Gunnar Peipman

Gunnar Peipman is ASP.NET, Azure and SharePoint fan, Estonian Microsoft user group leader, blogger, conference speaker, teacher, and tech maniac. Since 2008 he is Microsoft MVP specialized on ASP.NET.

    6 thoughts on “ASP.NET MVC: Helper method to display date ranges

    • December 31, 2011 at 12:03 pm
      Permalink

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

    • December 31, 2011 at 12:16 pm
      Permalink

      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.

    • December 31, 2011 at 1:10 pm
      Permalink

      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
      ? @”<div class=””dateRange””>{0:g} – {1:t}</div>”
      : @”<div class=””dateRange””>{0:g} – {1:g}</div>”;

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

    • January 1, 2012 at 10:38 am
      Permalink

      Looks good, but why not using Tag?

    • January 1, 2012 at 12:40 pm
      Permalink

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

    • January 1, 2012 at 12:41 pm
      Permalink

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *