用 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

本篇大綱：本篇要解決的問題。將秒數轉換為時間程式碼。範例。遇到「API 回來給的是秒數，但在頁面呈現時要秀出的是 時、分、秒 」的需求，本篇就是程式碼說明後，最後直接用 Tailwind CSS 做出一個 Demo 頁給大家試試。

Augustus

Augustus

Let's Write

Let's Write

https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg