---
# System prepended metadata

title: "\U0001F3C5Day38 -  React 套件應用 (4) - Day.js"
tags: [React 直播班 - 2025 冬季班]

---

# 🏅Day38 -  React 套件應用 (4) - Day.js

Day.js 是一個 輕量級的日期與時間處理庫，用於在 JavaScript 中進行日期與時間的解析、格式化、操作和顯示。它的 API 設計靈感來自 Moment.js，但體積更小、效能更高，並且完全相容於 ES6 模組。


[官方連結](https://day.js.org/en/)

### 與 Moment.js 的比較
![螢幕擷取畫面 2024-11-19 174818](https://hackmd.io/_uploads/rJ1-119fyl.png)

### 基本用法
獲取當前的時間：
```js
const now = dayjs();
console.log(now.format()); // 例如: 2024-11-19T10:30:45+08:00
```

格式化日期：
```js
const date = dayjs();
console.log(date.format("YYYY-MM-DD")); // 2024-11-19
console.log(date.format("dddd, MMMM D, YYYY")); // Tuesday, November 19, 2024
```

日期加減操作：
```js
const date = dayjs();
console.log(date.add(7, "day").format("YYYY-MM-DD")); // 加 7 天
console.log(date.subtract(3, "month").format("YYYY-MM-DD")); // 減 3 個月
```

比較日期：
```js
const date1 = dayjs("2024-01-01");
const date2 = dayjs("2025-01-01");

console.log(date1.isBefore(date2)); // true
console.log(date1.isAfter(date2)); // false
console.log(date1.isSame("2024-01-01")); // true
```

計算差距：
```js
const date1 = dayjs("2024-01-01");
const date2 = dayjs("2025-01-01");

console.log(date2.diff(date1, "day")); // 366 天 (因為 2024 是閏年)
console.log(date2.diff(date1, "month")); // 12 個月
```

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/fhljksmg-the-styleful/pen/GgqqXOQ?editors=0011)，利用 Day.js 的方式取得現在的時間，並且轉換成此時間格式：`2024-11-17 20:05:40`，以及取得一週後的日期。


<!-- 解答： 
```
const dayjs = window.dayjs;

const App = () => {
  const now = dayjs();
  const formattedTime = now.format("YYYY-MM-DD HH:mm:ss");
  const oneWeekLater = now.add(7, "day").format("YYYY-MM-DD");
  return (
    <div style={{ textAlign: "center", marginTop: "50px", fontFamily: "Arial" }}>
      <h1>React + Day.js 範例</h1>
      <p>當前時間：<strong>{formattedTime}</strong></p>
      <hr />
      <p>一週後的日期：<strong>{oneWeekLater}</strong></p>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
```
-->
| Name | Codepen | 
| -------- | -------- |
| 7lun     | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/azZVQXe?editors=0010)     |
|TWLeoC|[Codepen](https://codepen.io/TWLeoC/pen/dPXeEQv?editors=0011)|
| Jin |[Codepen](https://codepen.io/Jin-L/pen/QwExOBW)|
| 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/myEKqjz?editors=1111)|
| cks40660 |[Codepen](https://codepen.io/CKS40660/pen/VYjdyWR)|
| 社子畢卡索 |[Codepen](https://codepen.io/pen?template=LEZrQbE)|
| RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/MYeXQYX?editors=0011)|
| 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/vEKrRYe?editors=0011)|
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/emzKyOW)|
| 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/bNeKOdN?editors=0011)|
| Percy |[Codepen](https://codepen.io/Percy-Ku/pen/EayRGbL)|
| Eric | [Codepen](https://codepen.io/wc-su/pen/XJKYOdo) |
| 平平 | [Codepen](https://codepen.io/ypinpin/pen/xbOzBXq) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/YPWvbzP?editors=0011)|
| Jenna | [CodePen](https://codepen.io/abiscc14/pen/OPXEYWm)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/zxBaXPW)|
| kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/zxBaVyZ?editors=0011)|
| 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/xbOJRBb?editors=0011)|
| 許志豪 |[Codepen](https://codepen.io/RoganHsu/pen/pvbZPPV?editors=0011)|
| andy |[Codepen](https://codepen.io/ewnblckz-the-styleful/pen/VYjBzLB?editors=0011)|
| Miikaa    | [codepen](https://codepen.io/Miikaa/pen/NPrBaxj)     | 
| Eileen    | [codepen](https://codepen.io/Eileen-io/pen/RNRJJyp)     | 
| Melanie    | [codepen](https://codepen.io/pnrcspte-the-animator/pen/raLZLRx)     | 
| 7Red | [Codepen](https://codepen.io/cch2655/pen/MYeqxgq) |