【问题标题】:Converting from UTC Datetime to local datetime in View在 View 中从 UTC 日期时间转换为本地日期时间
【发布时间】:2012-02-18 05:41:52
【问题描述】:

所以我无意中遇到了 Azure 使用 UTC 时间的现实。没关系,除了我只有在部署时才发现这一点! (当它处于调试模式时,它只使用我的comps时间,所以这被忽略了)

所以我需要能够将日期时间显示给用户。我不介意(并且更喜欢)它是UTC。 但是,我的应用程序中有很多不同的地方会弹出日期,所以我想知道让所有显示显示当地时间的快速而肮脏的解决方案是什么。我正在考虑为日期时间使用编辑器模板。这是一个好主意吗?我将使用什么来进行转换?

【问题讨论】:

    标签: javascript asp.net-mvc-3 datetime azure azure-sql-database


    【解决方案1】:

    这是我想出的编辑器和显示模板,允许用户输入并在他们自己的时区显示时间,并将其转换为 UTC 以供提交。

    它需要将 UIHint 属性设置为每个模型 UTC DateTime 字段的自定义值“UTCTime”,如下所示,以选择正确的显示和编辑器模板。没有此注释的模型中的 DateTimes 将不会受到影响:

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

    /Views/Shared/EditorTemplatesUTCTime.cshtml:

    @model DateTime?
    @{
        var name = Html.GetFieldNameForModel(); // See the HTML extension at the end of this post
    
        var boxName = name + ".Value";
        var boxId = name + "_Value";
        var divId = name + "_UTC";
    }
    @Html.TextBoxFor(m => m.Value, new { type = "datetime", onBlur ="$('#" + name + "').val(UTCDateFuncs.ToUTCDate($('#" + boxId + "').val()));$('#" + divId + "').html('UTC:' + $('#" + name + "').val());$('#" + boxId + "').attr('title','UTC:' + $('#" + name + "').val());" })<span id="@divId"></span>
    <script>
        new function () {
            var utcVal = $('#@(boxId)').val();
            $('#@(boxId)').val(UTCDateFuncs.FromUTCDate(utcVal));
            $('#@(boxId)').attr('title', 'converted from UTC ' + utcVal);
        }
    </script>
    @Html.HiddenFor(m=>m)
    

    \Views\Shared\DisplayTemplates\UTCTime.cshtml

    @model DateTime?
    @if(Model.HasValue){<span class="UTCTime">@Model</span>}
    

    网站模板中或某处(但不在模板中)所需的 javascript:

    // UTC Date
    $(function () {
        $('.UTCTime').each(function () {
            var oldtext = $(this).html();
            var result = UTCDateFuncs.FromUTCDate(oldtext);
    
            $(this).html(result);
            $(this).attr("title", "Converted from UTC " + oldtext);
        });
    });
    
    var UTCDateFuncs = {
        ToUTCDate: function (datetext) {
            try {
    
                var n = new Date(datetext);
                offsetms = n.getTimezoneOffset() * 60 * 1000;
    
                n = new Date(n.valueOf() + offsetms);
    
                result = n.toDateString() + " " + n.toLocaleTimeString();
    
            }
            catch (ex) {
                console.warn("Error converting time", ex);
            }
            return result;
        },
    
        FromUTCDate: function (datetext) {
            var result;
            try {
    
                var n = new Date(datetext);
                offsetms = n.getTimezoneOffset() * 60 * 1000;
    
                n = new Date(n.valueOf() - offsetms);
    
                result = n.toDateString() + " " + n.toLocaleTimeString();
    
            }
            catch (ex) {
                console.warn("Error converting time", ex);
            }
            return result;
        }
    };
    

    还利用了这个 HTML 扩展: \Controllers\Extensions\HtmlExtensions.cs

    using System;
    using System.Web.Mvc;
    
    public static class HtmlExtensions
    {
    
        public static string GetFieldNameForModel<TModel>(this HtmlHelper<TModel> htmlHelper)
        {
            var ti = htmlHelper.ViewData.TemplateInfo;
            var name = ti.HtmlFieldPrefix;
            return name;
        }
    
    }
    

    这仅用于我们的管理页面,因此在显示编辑框转换结果的文本框之后有一个不太用户友好的跨度。

    【讨论】:

      【解决方案2】:

      this 会帮助你吗?

      问题是您并不真正知道服务器上用户的时区。你最多只能猜测一个人的文化,但不能猜测时区。假设用户在美国,文化“en-us”至少可以有 4 个时区。

      另一种方法是让用户在使用您的网站时选择/选择首选时区。然后,您可以将此选择保存在 cookie 或配置文件中。有了用户的时区,你可以用类似这样的方法在时区之间转换:

      var localDateTime = TimeZoneInfo.ConvertTimeFromUtc(utcDateTime, timeZone.TimeZoneInfo);
      

      在哪里使用TimeZoneInfo 类型的静态方法ConvertTimeFromUtc。还有一个TimeZoneInfo 的实例(在我的例子中是我的自定义类型的属性),它保留了用户的TimeZoneInfo 设置。

      参考jQuery solution - 你可以使用它,在 document.ready() 上调用这个小函数。只是您必须记住将所需的 css 类添加到您的时间显示字段中。

      但最后,如果您的目标是多时区访问者,您可能希望向他们询问首选时区以在后端进行转换,并明确显示时间为 UTC选择了首选时区。

      【讨论】:

      • 我怀疑上面的行会在客户端浏览器上运行。作为剃刀语法,代码将在服务器上执行并将时间转换为服务器的本地时区,而不是客户端。一些纯 javascript 或 jquery 库可能会拯救。
      • @AKS 当您仔细阅读答案时,您会注意到它甚至暗示 在服务器上您知道 最终用户时区。你用它来转换。
      猜你喜欢
      • 2012-10-07
      • 1970-01-01
      • 2016-07-29
      • 2019-06-21
      • 1970-01-01
      • 1970-01-01
      • 2018-07-15
      • 2011-06-13
      • 1970-01-01
      相关资源
      最近更新 更多