網站前後端時區

asp.net c# 網站開發前端

alien663 2022-11-24 13:57:45 ‧ 2253 瀏覽

分享至

前言

以前架設網站系統，都是for台灣的使用者，因此從未考慮過當使用者來自各個國家時，怎樣按照各地區去處理時區問題。講到這裡，肯定有人會覺得說，使用UTC不就可以解決了嗎?

沒錯，使用UTC是一個非常好的解法，但是說規說，那實際上開發的規範要如何訂定，才能完美達成這需求呢?時區問題在網站的前、後端和資料庫，又要怎樣實作出時區自動化呢?

本文將使用 .net core做為後端為範例講解時間資料的變化。

Source Code

先不解釋這麼多，我們從source code以及demo來討論。

Backend code

這裡設計兩支API，分別使用字串以及datetime去做時間處理

public class ExampleController : ControllerBase
    {
        [HttpGet("{str_date}")]
        public IActionResult GetTimeZone(string str_date)
        {
            CultureInfo provider = CultureInfo.InvariantCulture;
            DateTime UTCTime = DateTime.ParseExact(str_date, "yyyyMMddHHmmss", provider).ToUniversalTime();
            DateTime LocalTime = DateTime.ParseExact(str_date, "yyyyMMddHHmmss", provider).ToLocalTime();
            return Ok(new { str_date, UTCTime, LocalTime});
        }

        [HttpGet("dt/{demotime}")]
        public IActionResult UpdateTimeZone(DateTime demotime)
        {
            DateTime UTCTime = demotime.ToUniversalTime();
            DateTime LocalTime = demotime.ToLocalTime();
            return Ok(new {UTCTime, LocalTime});
        }
    }

Frontend HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Time Demo</title>
    <style>
        .codeblock {
            display: block; /* fixes a strange ie margin bug */
            font-family: Courier New;
            font-size: 10pt;
            overflow:auto;
            background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
            border: 1px solid #ccc;
            padding: 10px 10px 10px 21px;
            max-height:1000px;
            line-height: 1.2em;
        }
        .my-block{
            padding-left: 10px;
            border-style: solid;
            border-color: black;
            margin-bottom: 30px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <div style="margin-bottom: 30px;">
        <div class="my-block">
            <p>This block will demo string to DateTime in C#</p>
            <label>date with string format : yyyyMMddHHmmss
                <input type="text" id="str-date" placeholder="20220101000000">
            </label><br><br>
            <button onclick="getTimeZone()">Click me to get time zone</button>
        </div>
        <div class="my-block">
            <p>This block will demo how utc and local time work in C#</p>
            <label>Select a Date : 
                <input type="datetime-local" id="demo-date">
            </label><br><br>
            <button onclick="getTimeZone2()">Click me to change time between utc and local</button>
        </div>
    </div >

    <div id="showdata" class="my-block"></div>

    <div class="my-block">
        The source code of demo
        <pre id="source-code" class="codeblock"></pre>
    </div>


    <script>
        getTimeZone = () =>{
            const strdate = document.getElementById("str-date").value
            fetch(`timezonetest/api/example/${strdate}`, {
                headers: {'content-type': 'application/json'},
                method: "GET"
            }).then(res => res.json())
            .then(data => {
                let e = document.getElementById("showdata")
                e.innerHTML = `
                Input date : ${data.str_date.substring(0, 4)}-${data.str_date.substring(4, 6)}-${data.str_date.substring(6, 8)} ${data.str_date.substring(8, 10)}:${data.str_date.substring(10, 12)}:${data.str_date.substring(12, 14)}<br>
                UTC Time in String : ${data.utcTime}<br>
                UTC Time in DateTime : ${new Date(data.utcTime)}<br>
                Local Time in String :  ${data.localTime}<br>
                Local Time in DateTime : ${new Date(data.localTime)}`
            })
            document.getElementById("source-code").innerText = `public IActionResult GetTimeZone(string str_date)
{
    CultureInfo provider = CultureInfo.InvariantCulture;
    DateTime UTCTime = DateTime.ParseExact(str_date, "yyyyMMddHHmmss", provider).ToUniversalTime();
    DateTime LocalTime = DateTime.ParseExact(str_date, "yyyyMMddHHmmss", provider).ToLocalTime();
    return Ok(new { str_date, UTCTime, LocalTime});
}`
        }

        getTimeZone2 = () => {
            let demodate = document.getElementById("demo-date").value
            fetch(`timezonetest/api/example/dt/${new Date(demodate).toISOString()}`, {
                headers: {'content-type': 'application/json'},
                method: "GET"
            }).then(res => res.json())
            .then(data => {
                let e = document.getElementById("showdata")
                e.innerHTML = `
                    UTC Time in String : ${data.utcTime}<br>
                    UTC Time in DateTime : ${new Date(data.utcTime)}<br>
                    Local Time in String : ${data.localTime}<br>
                    Local Time  in DateTime : ${new Date(data.localTime)}`
            })
            document.getElementById("source-code").innerText = `public IActionResult UpdateTimeZone(DateTime demotime)
{
    DateTime UTCTime = demotime.ToUniversalTime();
    DateTime LocalTime = demotime.ToLocalTime();
    return Ok(new {UTCTime, LocalTime});
}
            `
        }
    </script>
</body>
</html>