Navigation

	Home Page
	Index
	All Pages

Quick Search
Advanced Search »

Contributor Links

	Create a new Page
	Administration
	File Management
	Login/Logout
	Your Profile

Other Wiki Sections

Software

Displaying UTC DateTime in Local Time Zone - ASP.NET and JavaScript

Overview¶

This article explains how to display a DateTime which is in UTC (e.g., stored in the database that way) in the local time zone of the client web browser.

Sample Code¶

Here's how to implement the solution in a Razor view. The MyUtcDateTimeProperty property is a property on your model that is a DateTime type which is assumed to be in UTC.

@Html.DisplayFor(m => m.MyUtcDateTimeProperty)

Reusable Code¶

JavaScript¶

Include this code in your _Layout.cshtml file. For every page based on it, a cookie will be created/updated with the time zone offset of the client.

$(document).ready(function () {

    var dt = new Date();
    var tzo = dt.getTimezoneOffset();
    document.cookie = "timeZoneOffset=" + tzo + "; path=/";

});

C# Code: ActionFilterAttribute¶

Create the following attribute in your web project. When this is setup as global filter (see below), it will retain the client's time zone offset (from the cookie written above) in a Session variable.

public class ClientTimeZoneAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        var cookie = filterContext.HttpContext.Request.Cookies["timeZoneOffset"];

        Int16 n = 0;

        var tzo = (cookie != null && Int16.TryParse(cookie.Value, out n) ? n : 0);

        filterContext.HttpContext.Session["tzo"] = tzo;

        base.OnActionExecuting(filterContext);
    }
}

C# Code: Global Filter¶

In the FilterConfig class in your web project, add the following line to the RegisterGlobalFilters method. This will cause the attribute's OnActionExecuting method to fire on each server request to an MVC controller (but not a Web API controller).

filters.Add(new ClientTimeZoneAttribute());

C# Code: ClientTimeZoneHelper class¶

Create the following class somewhere in your server code.

public class ClientTimeZoneHelper
{
    public static string ConvertToLocalTimeAndFormat(DateTime dt, string format)
    {
        var o = HttpContext.Current.Session["tzo"];

        var tzo = o == null ? 0 : Convert.ToDouble(o);

        dt = dt.AddMinutes(-1 * tzo);

        var s = dt.ToString(format);

        if (tzo == 0)
            s += " GMT";

        return s;
    }
}

Razor View: DateTime.cshtml¶

Create the following display template (i.e., CSHTML view with your web project, under the /Views/Shared/DisplayTemplates folder.

@model System.DateTime
@My.Namespace.ClientTimeZoneHelper.ConvertToLocalTimeAndFormat(Model, "MM/dd/yy h:mm:ss tt")