JavaScript 本地時間與 Timestamp 互相轉換

製作 Vue 電商網站的優惠券功能時,需要將優惠碼有效日期的時間戳存回後端,並在畫面上呈現可讀的日期格式。
這時候會用到 Timestamp 與本地時間互相轉換的技巧,聽起來有點複雜,不過實際操作幾次並寫成筆記後,覺得其實也不難理解哩,總之一起來做看看唄!

Timestamp 與本地時間的互相轉換

目標效果:上傳日期格式要用 Timestamp,顯示在畫面上則是用一般日期格式。

STEP 1:創建本地時間

第一步當然就是調用 Date() 物件,如果沒有指定參數,物件預設值為產生物件的日期與本地時間。
本地時間是指執行 JavaScript new Date() 的用戶的電腦時間。

1
2
3
4
5
data() {
return {
due_date: new Date(), // Wed Jan 15 2020 16:01:52 GMT+0800 (台北標準時間)
};
},

STEP 2:將時間轉換為 Timestamp

步驟二:將 new Date() 轉換為 Timestamp,以儲存至資料庫

我們透過畫面上的 <input> 選擇日期後,vm.due_date 因為 <input type="date"> 的關係,會讓剛才的 due_date 變成 "2020-01-15" 這種格式的結果。

但是我們要傳回資料庫儲存的是 Timestamp 格式。
因此,由於 new Date("2020-01-15") 就等於 1579046400000(毫秒),所以可以透過 Math.floor(new Date("2020-01-15") / 1000) 將字串轉回 Timestamp(秒)儲存。

1
2
3
4
5
6
7
watch: {
due_date() {
const vm = this;
const timestamp = Math.floor(new Date(vm.due_date) / 1000); // 1579046400
vm.tempCoupon.due_date = timestamp;
}
},

轉成 Timestamp 數值可方便處理日期排序動作

STEP 3:把 Timestamp 轉換為日期字串

步驟三:把 Timestamp 再轉換為日期字串,以呈現到 Modal 畫面上

成功儲存 Timestamp 於資料庫後,我們還要把日期也呈現到畫面上。
這邊會使用到 JavaScript 的 Date.toISOString() 方法,取得 ISO 格式的日期字串。

透過 new Date(timestamp * 1000) 先將剛才的 Timestamp 轉成可讀的時間,再把它轉成 ISO 的格式。轉成 ISO 格式後,日期會變成類似這種格式:2011-10-05T14:48:00.000Z

接著我們以字母”T”為中心,將這段字串切成兩半,並取得前半段,也就是我們要呈現的日期部分。
這樣我們就能順利把儲存到資料庫的 Timestamp,再呈現到畫面上囉!

1
2
3
4
const dateAndTime = new Date(vm.tempCoupon.due_date * 1000)
.toISOString()
.split('T');
vm.due_date = dateAndTime[0];

CodePen 範例:Timestamp 與日期的互相轉換

STEP 4:使用 Filter 處理要呈現的格式

最後,我們要使用 Filter 過濾器來做資料處理,主要是做文字格式化,也就是處理優惠碼表格中的”到期日”這個欄位所要呈現的資料格式。

方法是先建立一個 Date 物件後,再使用 toLocaleDateString 方法,就能把參數 time,也就是從資料庫取回的 Timestamp(秒),轉換成可讀的時間哩。

date.js

1
2
3
4
export default function (time) {
const date = new Date(time * 1000); // 因為一般 timestamp 取得的是秒數,但要帶入的是毫秒,所以要乘 1000
return date.toLocaleDateString(); // "2019/1/14"
}

參考資料

  1. [JS] JavaScript Date Time Method 日期時間 | PJCHENder 私房菜
  2. 在 JavaScript 簡單取得 unix timestamp

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。