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

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

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

### 與 Moment.js 的比較

### 基本用法
獲取當前的時間：

const now = dayjs();
console.log(now.format()); // 例如: 2024-11-19T10:30:45+08:00

格式化日期：

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

日期加減操作：

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 個月

比較日期：

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

計算差距：

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) |