時區到各瀏覽器顯示時間統一處理方式

今天要討論的是，當日期時間資料送到瀏覽器時，顯示出來的結果往往讓人難以捉摸。

DateTime跟DateTimeOffset轉成JSON以後的結果：

{
  "DateTimeOffset": "2014-07-11T00:00:00+08:00",
  "DateTime": "2014-07-11T00:00:00"
}

DateTimeOffset後面多了+08:00，表示這個時間是特定時區的時間，而DateTime是沒有的。

這時候丟到JavaScript的Date裡面：

  new Date(DateTimeOffset);
  new Date(DateTime);

呈現在畫面上就會變成：

Browser	DateTimeOffset	DateTime
Chrome	Fri Jul 11 2014 00:00:00 GMT+0800 (台北標準時間)	Fri Jul 11 2014 08:00:00 GMT+0800 (台北標準時間)
IE11	Fri Jul 11 2014 00:00:00 GMT+0800 (台北標準時間)	Fri Jul 11 2014 00:00:00 GMT+0800 (台北標準時間)
FireFox	Fri Jul 11 2014 00:00:00 GMT+0800 (台北標準時間)	Fri Jul 11 2014 00:00:00 GMT+0800 (台北標準時間)

當沒有指定時區時，顯示出來的結果因各瀏覽器定義不同，而有不同的結果。

當不想要資料庫所有欄位都記時區的時候，就需要變更一下Json的DateTimeConverter。

首先宣告一個UTCDateTimeConverter，並且繼承IsoDateTimeConverter ，然後在轉JSON的時候自動轉換成設定的格式

備註1：希望給瀏覽器自動轉換為Local時間，所以是轉換成UTC(國際標準時間)
備註2：避免日後Newtonsoft.Json對IsoDateTimeConverter更新，所以不重寫WriteJson，使用設定轉換格式並由IsoDateTimeConverter的WriteJson進行轉換。

/// <summary>
/// DateTime/DateTimeOffset 傳換為UTC日期格式 (Ex: 2014-07-11T12:53:00+00:00).
/// </summary>
public class UTCDateTimeConverter : IsoDateTimeConverter
{
  /// <summary>
  /// 日期轉成Json格式
  /// </summary>
  /// <param name="writer" >The JsonWriter to write to.</param>
  /// <param name="value" >The value.</param>
  /// <param name="serializer" >The calling serializer.</param>
  public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer)
  {
    //DateTimeOffset轉換時會自動加上時區，所以要先把他轉成UTC時間的DateTime
    if (value.GetType() == typeof(DateTimeOffset))
    {
      DateTimeOffset tmpDateTimeOffset = (DateTimeOffset)value;
      value = tmpDateTimeOffset.DateTime.Add(-tmpDateTimeOffset.Offset);
    }
    //設定想要轉換的格式
    base.DateTimeFormat = "yyyy-MM-ddTHH:mm:ss.FFFFFFFK+00:00";
    //使用預設的WriteJson進行轉換
    base.WriteJson(writer: writer, value: value, serializer: serializer);
  }
}

因為希望傳出去時間格式是統一的，而使用的也是WebApi，所以直接在App_Start/WebApiConfig.cs進行設定：

config.Formatters.JsonFormatter.SerializerSettings.Converters.Add(new UTCDateTimeConverter());

轉出來的Json為：

{
  "DateTimeOffset": "2014-07-10T16:00:00+00:00",
  "DateTime": "2014-07-11T00:00:00+00:00"
}

DateTimeOffset已經是被剪了8小時。

呈現在畫面上就會變成：

Browser	DateTimeOffset	DateTime
Chrome	Fri Jul 11 2014 00:00:00 GMT+0800 (台北標準時間)	Fri Jul 11 2014 08:00:00 GMT+0800 (台北標準時間)
IE11	Fri Jul 11 2014 00:00:00 GMT+0800 (台北標準時間)	Fri Jul 11 2014 08:00:00 GMT+0800 (台北標準時間)
FireFox	Fri Jul 11 2014 00:00:00 GMT+0800 (台北標準時間)	Fri Jul 11 2014 08:00:00 GMT+0800 (台北標準時間)

瀏覽器都統一了^^

參考：
IsoDateTimeConverter Source
Add different Json.NET DateTimeConverters through the JsonFormatter's SerializerSettings
Create a JSON.NET Date to String custom Converter