用 Day.js 把秒數轉換為時間

本篇要解決的問題

這幾天遇到「API 回來給的是秒數，但在頁面呈現時要秀出的是 時、分、秒 」的需求，偷懶直接用 Day.js 的套件後，發現照著文件去寫卻換算不出來 = =，傻眼，後來是在 Google 大神的幫助下才找到寫法。

因為程式碼很短，本篇就是一個說明後，然後直接用 Tailwind CSS 做出一個 Demo 頁給大家試試囉。

本篇參考文件：

Day.js Loading plugin in the browser

Day.js Durations Format

GitHub Issue Feature request: Add Duration Plugin

將秒數轉換為時間程式碼

Day.js 的原文件是寫在 Durations Format 當中，如下：

dayjs.duration({
  seconds: 1,
  minutes: 2,
  hours: 3,
  days: 4,
  months: 6,
  years: 7
}).format('YYYY-MM-DDTHH:mm:ss') // 0007-06-04T03:02:01

因為在實作時只會給秒數，所以 Format 出來後像其它的「年、月、日、時、分」沒給的話就都是 undefined，後來是在 GitHub Issue 上看到有神人給的範例後，才知道不是這麼寫。

應該寫成如下：

dayjs.duration({秒數}, "seconds").format('Y年 M月 D日 H時 m分 ss秒');

{秒數} 替換成要計算的實際秒數即可。

"secondes" 的部份，也可以替換成其它單位：

seconds、minutes、hours、days、months、years

format 的格式文件上有這些：

範例

August 製作了一個範例，放在 CodePen 上，輸入要轉換的秒數後，按下「轉換」就可以看見結果：

https://codepen.io/letswrite/full/YzrXKLP

Summary

Article Name

用 Day.js 把秒數轉換為時間

Description

學習如何使用 Day.js 將秒數轉換為時、分、秒的時間格式。本文詳細解釋了相關程式碼和操作方法，並提供了一個實用的 Tailwind CSS Demo 頁面供讀者試用和學習。

August

Augustus

Let's Write

Let's Write

https://letswritetw.github.io/letswritetw/dist/img/logo_512.png