Display datetime based on user’s timezone in Asp.Net MVC

When creating an internet application/website, your users located anywhere in the world, therefore it’s important to let user to choose their own timezone and display the datetime information according to their location.

In this article, I am going to show you how to display all available Timezone information using Asp.Net MVC, and convert the original datetime to selected Timezone datetime.

img

In .Net 3.5, Microsoft releases the TimeZoneInfo class that makes handling multiple timezone much easier. With the class, you can find out all available timezones. By put them into the SelecctListItem, you can pass this information to the view of the Asp.Net MVC.

       ReadOnlyCollection<TimeZoneInfo> tz = TimeZoneInfo.GetSystemTimeZones();
       List<SelectListItem> items = new List<SelectListItem>();

       foreach(TimeZoneInfo tzi in tz)
       {
           items.Add(new SelectListItem { Text = tzi.DisplayName, Value = tzi.Id });
       }

Next step is to convert the datetime to selected timezone item. In this tutorial, I assume your data source has UTC datetime format stored. Why? because it’s a good idea to save all the UTC datetime to the database column so that it makes the datetime conversion much easier later.

You can use the build in static function from TimezoneInfo class to convert the datetime, but in this tutorial, I like to show you how to do it by writing an helper class that converts the datetime by the offset hours. You can find out the off set hours to the UTC datetime by the following code

TimeZoneInfo tzi = TimeZoneInfo.FindSystemTimeZoneById(timezone);
            
double offSetHours = tzi.BaseUtcOffset.TotalHours + ((tzi.IsDaylightSavingTime(DateTime.UtcNow)) ? 1 : 0);

Once you pass the datetime object or list contains datetime property from controller to the view, you can convert the datetime property to the user selected timezone by the following helper class

public static DateTime ConvertUTCToLocalTime(DateTime datetime)
{
    double offSetHours = (HttpContext.Current.Session["offSetHours"] != null) ? (double)HttpContext.Current.Session["offSetHours"] : 0;
    DateTime d = datetime.AddHours(offSetHours);

    return d;
}

You may notice that I put the off set hours info in the session in this tutorial. Because in real world application, you do not want to retrive user’s timezone or off set hours informations by calling dateabase everytime when convertion is needed. You can store the information in User’s Session/Cookie, so that it only get pulled once when user sign into application.

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s