[小菜一碟] 搞懂 Day.js Timezone 外掛套件的使用方式

Day.js 是在前端的世界中,一個處理日期時間相當知名的套件,或許有朋友聽過 Moment.js,但是可以用 Day.js 的話我優先選擇使用 Day.js,最主要是它的檔案大小號稱只有 2KB,之所以可以壓到這麼小,最重要的一個原因是它將一些額外的功能,以外掛的方式分包出去,要使用的話再引用進來,而 Timezone 是其中一個外掛。

格式時間及戳記時間

在 JavaScript 中我們常見到的時間表達方式大概有兩種,一種是清楚顯示年月日時分秒的時間,我稱呼它為「格式時間」;另一種是從 1970-01-01 00:00:00.000 起算的時間戳,我稱呼它為「戳記時間」。

全世界的戳記時間在同一個時間點,是一樣的,但是每個時區的格式時間是不一樣的,所以,英國倫敦的 2022-01-01 00:00:00 不等於台灣的 2022-01-01 00:00:00,而是等於台灣的 2022-01-01 08:00:00,但是英國倫敦 2022-01-01 00:00:00 的戳記時間,則等於台灣 2022-01-01 08:00:00 的戳記時間。

Timezone

當我們使用 Day.js 的 Timezone 外掛做時區轉換時,要清楚格式時間及戳記時間的差異,不然會被它轉換出來的 dayjs 物件搞得很混亂,為了 Demo 簡便,我直接用 script 標籤引用 Timezone 外掛,由於 Timezone 外掛相依於 UTC 外掛,所以要連同 UTC 外掛一起引用進來。

<!DOCTYPE html>
<html lang="zh-TW">
<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>Day.js - Timezone</title>
</head>
<body>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.1/dayjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.1/plugin/utc.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.1/plugin/timezone.min.js"></script>
    <script>
        dayjs.extend(window.dayjs_plugin_utc);
        dayjs.extend(window.dayjs_plugin_timezone);
    </script>
</body>
</html>

Timezone 外掛目前提供了四個 API:

1. dayjs.tz()

dayjs.tz() 是將某個格式時間指定為是某個時區的格式時間,例如,我要將 2022-01-01 00:00:00 指定為是美國紐約的 2022-01-01 00:00:00,我們就這樣寫:

dayjs.tz("2022-01-01 00:00:00", "America/New_York");

這時候我們去看它的戳記時間,就跟相同台灣的 2022-01-01 00:00:00 的戳記時間差了 13 個小時。

但是我們把 dayjs 物件印出來會發現,怎麼還是顯示台北標準時間? 這是因為 dayjs 物件裡面有一個 Date 物件,是拿來顯示該時區的格式時間用的,所以當 dayjs 物件有包含時區資訊在裡面時,我們必須忽略瀏覽器目前的時區資訊,我在這裡被卡了一下。

2. .tz()

如果我們想知道美國紐約的 2022-01-01 00:00:00 是台灣時間的什麼時候,可以用上 .tz() 這個 API,先呼叫 dayjs.tz() 指定時間的時區,再呼叫 .tz() 轉換時區,使用方法如下:

dayjs.tz("2022-01-01 00:00:00", "America/New_York").tz("Asia/Taipei");

這樣轉出來其實戳記時間沒有變,但是我們拿帶有時區資訊的 dayjs 物件去做格式化的時候,它就會顯示該時區正確的格式時間。

  1. dayjs.tz.guess()

dayjs.tz.guess() 這個 API 是取得瀏覽器目前的時區是哪一個?

  1. dayjs.tz.setDefault()

dayjs.tz.setDefault() 可以直接指定預設的時區,之後使用 dayjs.tz() 時可以忽略第二個參數。

時區的問題不管在哪一種程式語言?哪一個框架?大都有妥當的處理方式,千萬不要再像這篇文章開頭提到的那樣加加減減的寫法,遇到有改時區的國家或是實施日光節約時間的國家,我們會有修不完的 Bug,以上的內容分享給大家,希望對大家有一點幫助。

相關資源

C# 指南
ASP.NET 教學
ASP.NET MVC 指引
Azure SQL Database 教學
SQL Server 教學
Xamarin.Forms 教學