後端和前端做跨時區網站要注意的事

最近使用 .Net 內建 API 回傳物件，他會把 DateTime 轉成 YYYY-mm-ddTHH:MM:ssZ，最近就打算把 Entity 回傳出去給前端，後來發現前端傳給我資料我會少8小時，發現是時區問題，最後前端就先幫我加 8 小時，因為我們網站沒有做跨區問題，所以這邊花點時間我後端要怎麼調整。

心智圖

ISO8601 日期時間格式

簡單來說格式就是 YYYY-mm-ddTHH:MM:ssZ，這邊 Z可以改時區，例如:+08:00。結果會是2022-02-02T12:00:00+08:00，這邊可能會問 T是什麼?Z是什麼?

T: 僅僅是分隔日期和時間的符號，沒有其他含義。所以下面的例子其實結果是一樣的。
Z: 這個說法也不嚴謹，指定 Z 時表示 UTC 時間，不指定時表示的是本地時間。

詳細可以看:

• ISO 8601 - 維基百科，自由的百科全書
• javascript - 關於“時間”的一次探索 - 前端漲姿勢 - SegmentFault 思否 ==>上面說TZ說明來自這篇

我以前也有寫過類似這個東西，不過跟這篇沒什麼關係:

• ISO 8601 時間格式 XXXX-XX-XXTXX:XX:XXZ - 程式狂想筆記
• ISO 8601 duration 時間標準小記 - 程式狂想筆記

為什麼前端傳給我會是錯的呢?

我當下看到我資料庫存的時間會是 2022-03-02 16:00:00，因為前端沒顯示時間，所以看到結果會是少一天。這邊 .Net 預設JSON轉的格式是 ISO8601 YYYY-mm-ddTHH:MM:ssZ，前端用 toISOString是不會帶時區的，所以造成這個問題。

到底要怎麼調整呢?

網站是否要做多時區?

像我之前工作大部分是不需要做跨時區網站，因為可能都是對台灣內部使用，之前跟 Line 案子合作過，他們有要求做跨時區，所以不是每個網站都有這個需求。之前六角學院辦的前端精神時光屋有做過倒數計時，這邊他們有討論過這個議題。

前端和後端怎麼配合呢?

網站需要做跨時區

後端接收前端日期時間

前端接收後端日期時間

簡單來說後端正常資料要存 UTC 時間，前端依照瀏覽器去控制時區。但前端回給後端也不須加上時區或者用 ISO8601格式，如我現在2023-04-01 20:00:00 台灣時區，但是前端使用2023-04-01T12:00:00Z和2023-04-01T20:00:00+08:00都可以，後端其實用工具解析會得到UTC時間(沒有時區的)，存在資料庫會是 UTC時區。

前端 UI 取得日期時間處理 UTC 時間方式

這邊主要說程式，這邊前端用datetimepicker 套件或用 HTML5 input[type=datetime-local] 取出時間轉 ISO8601就可以了。

1

new Date(input.value).toISOString();

參考: Using the input datetime-local. As you probably know already, in order… | by Andrea Giammarchi | Medium

後端處理日期時間

每個程式語言都不一樣。這邊就放點相關處理方式。

• Use ISO-8601 Date and Time Format with PHP – 佛祖球球
• php strtotime 也能直接轉
• Asp.Net Core Json配置（大小写、日期格式等）_Morcom.G的博客-CSDN博客
• [.NET Core] System.Text.Json 添加 Customize JsonConverter | K. C. - 點部落
• Converting ISO 8601-compliant String to java.util.Date - Stack Overflow
• Formatting JSON Dates in Spring Boot | Baeldung

網站不需要做跨時區

很簡單，後端程式存現在時區格式，前端接到無需做特別轉換，這邊就真的很簡單。怕未來要做跨時區，但現在階段無須跨時區，這邊可以用 UTC 時區，傳給前端再做時區轉換。

這邊也沒有什麼規定，不過也要看公司有沒有人這樣做，不然其他人覺得你很奇怪怎麼這樣用?