Jasinski Technical Wiki

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

PoweredBy

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

RSS
Modified on Thu, Apr 10, 2014, 9:34 AM by Administrator Categorized as Uncategorized

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")

ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2018, Patrick Jasinski.