ASP.NET MVC Controller/View display local time

Question

I have an ASP.NET MVC app that stores all SQL DateTime in UTC, so that the time is consistent regardless of time zone that the client is hitting the site from.

Now, I want to re-display the correct time to the user, so any time I display a time in my View I use:

timeVariable.ToLocalTime();

However, .ToLocalTime() is based on the server, not the client.

Do I need to handle this in JavaScript on the client?

I probably could pass the time zone as part of the request and have the controller handle the offest, but I am assuming there is a better way to do this. Or isn't there?

Thanks in advance for any help!

-Matt

Take a look at this post I think it's the same scenario... http://stackoverflow.com/questions/671964/asp-net-client-time — Marko, Nov 15 '11 at 22:32

score 14 · Answer 1 · edited May 04 '16 at 18:36

For Asp.Net MVC + jQuery I've created a DisplayTemplate and script to help with this.

Model class:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

public class SampleModelWithDate
{
    [UIHint("UTCTime")]
    [DataType(DataType.DateTime)]
    public DateTime Date { get; set; }
}

DisplayTemplate: Views\Shared\DisplayTemplates\UTCTime.cshtml

@model DateTime
<span class="UTCTime">@Model</span>

Add to Views\Shared_Layout.cshtml, or to your View:

<script>
    $(function () {
        // Determine timezone offset in milliseconds
        // from: http://www.w3schools.com/jsref/jsref_getTimezoneOffset.asp
        var d = new Date()
        var offsetms = d.getTimezoneOffset() * 60 * 1000;
        $('.UTCTime').each(function () {
            try
            {
                var text = $(this).html();

                var n = new Date(text);
                n = new Date(n.valueOf() - offsetms);

                $(this).html(n.toDateString() + " " + n.toLocaleTimeString());

                $(this).attr("Converted from UTC " + text);
            }
            catch (ex) {
                console.warn("Error converting time", ex);
            }
        });
    });
</script>

Clean it up a little of course, it's a bit verbose so you can see what's going on.

Thanks for the verbose answer. – Yablargo Jun 13 '13 at 02:19 — Yablargo, Jun 13 '13 at 02:19

score 8 · Accepted Answer · answered Nov 15 '11 at 22:41

8

Almost all sites that I have seen that translate time to local time ask the user to specify his or her timezone when creating an account. Gmail is one example but there are many others.

I've found that many solutions trying to use javascript or reverse-lookup on the IP address are prone to failure and edge cases.

answered Nov 15 '11 at 22:41

Mike Marshall

7,788
4
39
63

Many applications are smart enough to determine the timezone that device is in so that when you travel, local time is adjusted automatically. An account setting wouldn't accommodate that, but it is a good start. – Daniel Przybylski Nov 01 '19 at 22:18

score 4 · Answer 3 · edited May 23 '17 at 12:34

In addition to Derrick's answer, "Append 'UTC' to the string before converting it to a date in javascript." Convert UTC date time to local date time using JavaScript

The UTCTime can be converted automatically to local time.

<script>
    $(function () {
        var d = new Date()
        $('.UTCTime').each(function () {
            try
            {
                var text = $(this).html() + ' UTC'; //Append ' UTC'

                var n = new Date(text);

                $(this).html(n.toDateString() + " " + n.toLocaleTimeString());

                $(this).attr("title", "Converted from UTC " + text);
            }
            catch (ex) {
                console.warn("Error converting time", ex);
            }
        });
    });
</script>

ASP.NET MVC Controller/View display local time

3 Answers3

Linked

Related