MVC - UTC date to LocalTime

Question

We have a MVC project and I need to display a UTC date converted to users local time. In my model I am passing the UTC date and in the view I am trying to do the following:

<%: Html.DisplayFor(m=> m.SomeDate.ToLocalTime()) %>

This throws an exception. Can anybody point me in the correct direction on how to convert the UTC date to local datetime for display at customer end. We will be storing dates as UTC and at display time these dates will need to be converted to the local machine equivalent.

See related: [http://stackoverflow.com/questions/4066275/c-utc-to-users-local-time](http://stackoverflow.com/questions/4066275/c-utc-to-users-local-time) — Jerad Rose, May 11 '11 at 02:49
Your code is server-side not client-side. I realise this is flagged in comments below but this is a popular question and its unclear from the way its asked! — noelicus, Jun 10 '17 at 08:45

score 15 · Answer 1 · answered May 11 '11 at 02:47

15

DateTime now = DateTime.UtcNow;
DateTime localNow = TimeZoneInfo.ConvertTimeFromUtc(now, TimeZoneInfo.Local);

answered May 11 '11 at 02:47

Chad Moran

12,834
2
50
72

1

This will need to be done on server side whereas i am talking about client side – Amitesh May 11 '11 at 02:50
3

@Amitesh, in the example in your question you are attempting convert the date on server side as well. – Jimmie R. Houts May 11 '11 at 02:52
I am trying to convert the date to local on client side using <%: Html.DisplayFor(m=> m.SomeDate.ToLocalTime()) %>. – Amitesh May 11 '11 at 03:05
With above code, I see this issue The conversion could not be completed because the supplied DateTime did not have the Kind property set correctly. For example, when the Kind property is DateTimeKind.Local, the source time zone must be TimeZoneInfo.Local. (Parameter 'sourceTimeZone' – Kurkula May 19 '22 at 23:11

score 9 · Answer 2 · answered Dec 28 '18 at 16:43

You can't do ToLocalTime() on the server since the server is in UTC. You either need to:

Have the client somehow send up it's timezone (this can be tricky since you won't get it by default with a GET request)
Have the server send down UTC and the client converts it to the local time. This happens naturally if you're using AJAX, but is cumbersome with just a razor view:

Here's a trick I used for to make the 2nd approach very easy for Razor views:

The server renders elements with a special class ".mytime" and the utc time (from server) specified in a custom attribute "utc":

   <div class="mytime" utc ="@date.ToString("o")"></div>
   <span class="mytime" utc ="2018-12-28T02:36:13.6774675Z"></span>

Note that .ToString("o") is how to write in UTC time.

And then have a local jQuery function iterate through all the elements with "mytime" class, read the UTC value in the attribute, and then do the conversion.

$(function () {
    var key = $(".mytime").each(function (i, obj) {
        var element = $(this); // <div> or <span> element. 
        var utc = element.attr("utc"); // "2018-12-28T02:36:13.6774675Z"
        var d = new Date(utc);
        var l = d.toLocaleString(); // Runs client side, so will be client's local time!
        element.text(l);
    });
});

I then created a MVC razor helper for rendering:

public static MvcHtmlString LocalDate(this HtmlHelper helper, DateTime date)
{
    // Must use MvcHtmlString to avoid encoding.
    return new MvcHtmlString(String.Format("<span class=\"mytime\" utc =\"{0}\"></span>", date.ToString("o")));
}

So now my view just includes JQuery and script above and then does:

Created at @Html.LocalDate(Model.CreatedDate)

Since this is invoked in jQuery's $() onload, it runs after the server has sent down all the times.

Worked like a charm!

I had to change `var utc = element.attr("utc");` to `var utc = element.attr("utc") + 'Z';`to make this work. — MatterOfFact, Oct 02 '19 at 07:21

score 9 · Answer 3 · answered May 11 '11 at 04:17

You will need to store the users timezone server side and then use something like this (although it should be done in the controller, not the view):

@TimeZoneInfo.ConvertTimeFromUtc(Model.CreatedOn, TimeZoneInfo.FindSystemTimeZoneById("E. Australia Standard Time"))

score 5 · Answer 4 · answered Apr 26 '12 at 00:30

5

It feels like a bit of a kludge but this worked in an MVC3 client

@DateTime.Parse(Html.DisplayFor(m=> m.SomeDate).ToString()).ToLocalTime().ToString()

answered Apr 26 '12 at 00:30

RogueThinking

164
1
5

1

I like it. It's clean and sits right there in the view. If you want to format for different views, it's easy--nicely done. It only looks like a kludge. – Todd Shelton Oct 26 '16 at 14:19
This solution is very simple and less codes. It works like a charm. – Thomas.Benz Aug 07 '22 at 18:42

score 5 · Answer 5 · edited Jun 10 '17 at 08:50

In mvc you can solve this issue by action filter. Please use the following steps:
1) Store client timezone offset info in session.
2) Create DatetimeConverter helper class.

public class DateTimeConverter
{
    public static DateTime? ToLocalDatetime(DateTime? serverDate, int offset)    
    {
        if (serverDate == null) return null;
        return serverDate.Value.AddMinutes(offset * -1);
    }

}

3).Create action filter.

public class LocalDateTimeConverter : ActionFilterAttribute
{
    public override void OnActionExecuted(ActionExecutedContext filterContext)
    {
       var model = filterContext.Controller.ViewData.Model;
        if (model != null && filterContext.HttpContext.Session["LocalTimeZoneOffset"] != null)
           ProcessDateTimeProperties(model, filterContext);
        base.OnActionExecuted(filterContext);
    }

    private void ProcessDateTimeProperties(object obj, ActionExecutedContext filterContext)
    {
        if (obj.GetType().IsGenericType)
        {
            foreach (var item in (IList)obj)
            {
                ProcessDateTimeProperties(item, filterContext);
            }
        }
        else
        {
            TypeAccessor member;
            List<PropertyInfo> props = new List<PropertyInfo>();
            props.AddRange(obj.GetType().GetProperties(BindingFlags.Public | BindingFlags.Instance | BindingFlags.SetProperty).ToList());
            member = TypeAccessor.Create(obj.GetType());
            foreach (PropertyInfo propertyInfo in props)
            {
                if (propertyInfo.PropertyType == typeof(DateTime) || propertyInfo.PropertyType == typeof(DateTime?))
                {
                    {
                        member[obj, propertyInfo.Name] = DateTimeConverter.ToLocalDatetime((DateTime?)propertyInfo.GetValue(obj), ((int)filterContext.HttpContext.Session["LocalTimeZoneOffset"]));
                    }
                }
                else if (propertyInfo.PropertyType.IsGenericType && propertyInfo.GetValue(obj) != null)
                {
                    foreach (var item in (IList)propertyInfo.GetValue(obj))
                    {
                        ProcessDateTimeProperties(item, filterContext);
                    }
                }
            }
        }
    }
}

4).Apply LocalDateTimeConverter filter on action which contains model data to return view.

After these all step you can see the result in view which contains dateTime info converted into local dateTime.

score 2 · Answer 6 · edited Mar 21 '18 at 04:22

2

All good answers. I did mine like this:

@Html.DisplayFor(m=> m.SomeDate.ToLocalTime()
    .ToString(
        CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern 
        + " " 
        + CultureInfo.CurrentUICulture.DateTimeFormat.LongTimePattern))

edited Mar 21 '18 at 04:22

Brendan Green

11,676
5
44
76

answered Jul 25 '17 at 18:01

Kelly R

159
1
3

This was the one for me. THANK YOU! – egmfrs Jun 22 '18 at 14:20

score 0 · Answer 7 · answered Jan 16 '17 at 07:12

0

Use this code to convert utc time to local time

<%: Html.DisplayFor(m=> m.SomeDate.ToLocalTime().ToString()) %>

You can use use following code in razor

@Html.DisplayFor(m=> m.SomeDate.ToLocalTime().ToString())

answered Jan 16 '17 at 07:12

Athul Nalupurakkal

430
4
8

2

I dont think this works. You get an exception: System.InvalidOperationException: 'Templates can be used only with field access, property access, single-dimension array index, or single-parameter custom indexer expressions.' – mikecamimo Aug 27 '17 at 23:02

score 0 · Answer 8 · answered Feb 07 '18 at 22:32

Converting UTC Date Time To LocalDate Can be done using jquery as well. Main Benefit of doing it using jquery is in case you have hosted your website on azure. some methods given above will not work. Only one option will be left to be used that's using jquery / javascript. As Datetime.Now in case of your website is hosted on azure will return utc time for datetime.now.tolocaltime(). Please find below an example in jquery to convert UTC time to localdatetime.

var date = new Date('2/8/2018 3:57:48 PM UTC');
date.toString() // "Thu Feb 08 2018 21:27:48 GMT+0530 (India Standard Time)"

score 0 · Answer 9 · answered Jun 22 '18 at 14:24

In a .NET Core project, I finally had success with the following razor code:

@Model.DateUpdated.ToLocalTime().ToString(
                  CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern 
                  + " " + 
                  CultureInfo.CurrentUICulture.DateTimeFormat.LongTimePattern)

(Inspiration taken from Kelly R's answer)

MVC - UTC date to LocalTime

9 Answers9

Linked