JSON日期轉換的時區陷阱

最新推荐文章于 2024-05-08 10:42:40 发布

转载最新推荐文章于 2024-05-08 10:42:40 发布 · 2k 阅读

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了使用KendoUIDatePicker时，出现的日期转换时区问题，解释了问题根源并提供了从客户端和服务器端解决此问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JSON日期轉換的時區陷阱

2014-02-12 17:20:56| 分类： HTML/CSS/JS |举报 |字号订阅

文章来源： http://blog.darkthread.net/post-2013-06-25-json-date-timezone-issue.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A%2BDarkthread%2B(Darkthread)

在使用Kendo UI DatePicker時，出現選好日期送至後端卻變成前一天的狀況。

以下程式可重現問題，kendoDatePicker所選日期透過.value()可得到一個JavaScript Date物件，JSON.stringify()後傳至Server端，使用Json.NET還原回DateTime後，以ToString("yyyy-MM-dd HH:mm:ss")方式傳回Client端alert顯示。

    <!DOCTYPE                      </head> <body>                          </body> </html>

<%@ Page Language="C#" %> <%@ Import Namespace="Newtonsoft.Json" %> html> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (Request["m"] == "post") { var p = Request["d"]; var nd = JsonConvert.DeserializeObject<DateTime>(p); Response.Write(string.Format("{0}->{1:yyyy-MM-dd HH:mm:ss}", p, nd)); Response.End(); } } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <link href="../Content/kendo/2013.1.319/kendo.common.min.css" rel="stylesheet" /> <link href="../Content/kendo/2013.1.319/kendo.bootstrap.min.css" rel="stylesheet" /> <form id="form1" runat="server"> <input data-bind="kendoDatePicker: { value: TheDate, format: 'yyyy-MM-dd' }" /> <br /> <span data-bind="text: TheDate"></span> <input type="button" data-bind="click: post" value="POST" /> </form> <script src="../Scripts/jquery-1.9.1.min.js"></script> <script src="../Scripts/kendo/2013.1.319/kendo.web.min.js"></script> <script src="../Scripts/knockout-2.2.1.js"></script> <script src="../Scripts/knockout-kendo.min.js"></script> <script> function myViewModel() { var self = this; self.TheDate = ko.observable("2012-12-21"); self.post = function () { $.post("", { m: "post", d: JSON.stringify(self.TheDate()) }, function (r) { alert("Result = " + r); }); }; } var vm = new myViewModel(); ko.applyBindings(vm); </script>

測試結果如下:

明明選了12/22日，但傳到.NET端ToString後卻是12/21日! 問題出在12/22的本地時間在JSON.stringify時被轉成UTC，12/22凌晨0點減去8小時，於是.NET端得到 DateTimeKind = UTC 的DateTime -- 12/21 16:00 UTC。

依據Telerik RD的說法，kendo.stringify跟JSON.stringify一樣，會將本地時間轉換成UTC時間，而kendoDatePicker .value()傳回的是JavaScript Date物件時區則會以本地時間為準，JSON轉成UTC後，若.NET處理時沒轉回本地時間或UTC時間，就會出問題。

知道原委，我理解到這個問題與Kendo UI無關，而是JSON具有全球化觀點，.NET端沒跟上造成的。在一個全球化網站，傳送時間需反應使用者所在時區，Server端才能精準掌握真正時點，但前提是.NET端應將來自各地的時間一律轉為UTC時間或本地時間才合理，直接ToString()看到的是當地時間，忽略時區差異便會衍生問題。

因此，我們可以重塑一個與Kendo UI無關的精簡範例:

<%@ Page Language="C#" %>
<%@ Import Namespace="Newtonsoft.Json" %>
 
<!DOCTYPE html>
 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["m"] == "post")
        {
            var p = Request["d"];
            var nd = JsonConvert.DeserializeObject<DateTime>(p);
            Response.Write(string.Format("{0}->{1:yyyy-MM-dd HH:mm:ss}", p, nd));
            Response.End();
        }
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <span id="sTime"></span>
    </form>
    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <script>
        var d = new Date();
        $("#sTime").text(d.toString());
        $.post("",
            { m: "post", d: JSON.stringify(d) },
            function (r) {
                alert("Result = " + r);
            });
    </script>
</body>
</html>

在早上8:00以前，將new Date()經JSON轉換後送到.NET，還原回DateTime再ToString()，看到的日期會是前一天!!

面對這個問題有兩個解決方向:

在Server端落實全球化概念，所有來自Client端的JSON時間，一律轉為UTC保存，顯示呈現時再視需求決定時區。
如果只是本土小公司使用的內網系統，所有Client端座落在方圓100公尺內，只因為用了JSON就要在系統推行全球化有點小題大作。而且，Server未必能配合修改，此時就要考慮由Client端解決。

要從Client端解決，我想到的做法是讓JSON.stringify()忽略時區差異，轉成"2013-06-22T07:18:48"(最後不加Z或+0800，對應成.NET DateTime相當於Kind = Unspecified)。~~實作技巧是偷偷將Date.prototype.toISOString()改成我們自訂的版本:~~

<script>
        //將原本的函數保留起來，必要時可以換回去
        var _toIsoDate = Date.prototype.toISOString;
        //借用kendo.toString做出Unspecified Kind的ISO8601格式
        Date.prototype.toISOString = function () {
            return kendo.toString(this, "yyyy-MM-ddTHH:mm:ss");
        };
 
        function myViewModel() {
            var self = this;
            self.TheDate = ko.observable("2012-12-21");
//...以下略...

重新評估後，改寫.toJSON()只會針對JSON轉換調整邏輯，較置換.toISOString()更符合目的，感謝Kuo-Chun Su提醒。

<script>
        //借用kendo.toString做出Unspecified Kind的ISO8601格式
        Date.prototype.toJSON = function () {
            return kendo.toString(this, "yyyy-MM-ddTHH:mm:ss");
        };
 
        function myViewModel() {
            var self = this;

如此，應該就能避開惱人的JSON日期時差問題囉~