簡介
Day.js 是一個輕量級的 JavaScript 日期庫，它提供了簡單易用的 API 來處理日期和時間。以及更加輕量級，并且具有更快的性能。
安裝
npm install dayjs使用
import dayjs from "dayjs";dayjs().format("YYYY-MM-DD HH:mm:ss");經典場景
1. 獲取當前時間
dayjs().format("YYYY-MM-DD HH:mm:ss");2. 格式化時間
dayjs("2021-01-01").format("YYYY-MM-DD HH:mm:ss");3. 解析時間
dayjs("2021-01-01 12:00:00", "YYYY-MM-DD HH:mm:ss");4. 時間加減
dayjs().add(1, "day").format("YYYY-MM-DD HH:mm:ss");
dayjs().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss");5. 時間比較
dayjs("2021-01-01").isBefore("2021-01-02");
dayjs("2021-01-01").isAfter("2021-01-02");
dayjs("2021-01-01").isSame("2021-01-01");6. 獲取時間差
dayjs("2021-01-01").diff("2021-01-02", "day");| 類型 | 說明 |
| year | 年 |
| quarter | 季度 |
| month | 月 |
| week | 周 |
| day | 天 |
| hour | 小時 |
| minute | 分鐘 |
| second | 秒 |
| millisecond | 毫秒 |
diff 默認返回是整數，如果需要返回小數，可以傳入第三個參數：true|false。
7. 快速獲取常用日期
# 前一天
dayjs().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss");
# 后一天
dayjs().add(1, "day").format("YYYY-MM-DD HH:mm:ss");
# 前一周
dayjs().subtract(1, "week").format("YYYY-MM-DD HH:mm:ss");
# 后一周
dayjs().add(1, "week").format("YYYY-MM-DD HH:mm:ss");
# 前一月
dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss");
# 后一月
dayjs().add(1, "month").format("YYYY-MM-DD HH:mm:ss");
# 前一季
dayjs().subtract(1, "quarter").format("YYYY-MM-DD HH:mm:ss");
# 后一季
dayjs().add(1, "quarter").format("YYYY-MM-DD HH:mm:ss");
# 前一年
dayjs().subtract(1, "year").format("YYYY-MM-DD HH:mm:ss");
# 后一年
dayjs().add(1, "year").format("YYYY-MM-DD HH:mm:ss");8. 日期范圍
import dayjs from "dayjs";
import isBetween from "dayjs/plugin/isBetween";dayjs.extend(isBetween);// 是否屬于某個范圍
dayjs("2021-01-01").isBetween("2021-01-01", "2021-01-02");
// 是否屬于某個范圍（包含邊界）
// [ 包含開始日期，包含結束日期 ]
// ( 不包含開始日期，不包含結束日期 )
dayjs("2021-01-01").isBetween("2021-01-01", "2021-01-02", "day", "[)");9. 倒計時實現
import { useState, useEffect, useCallback, useRef } from "react";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";dayjs.extend(duration);/*** 倒計時 Hook* @param {number} targetTime - 目標時間戳（毫秒）* @param {number} interval - 更新間隔（毫秒），默認 1000ms* @returns {Object} 倒計時狀態* @returns {number} remainingTime - 剩余時間（毫秒）* @returns {boolean} isFinished - 是否結束* @returns {Object} formattedTime - 格式化后的時間對象* @returns {Function} reset - 重置倒計時*/
export default function useCountdown(targetTime, interval = 1000) {const [remainingTime, setRemainingTime] = useState(0);const [isFinished, setIsFinished] = useState(false);const targetTimeRef = useRef(targetTime);// 計算剩余時間const calculateRemainingTime = useCallback(() => {const now = dayjs();const target = dayjs(targetTimeRef.current);const diff = target.diff(now);if (diff <= 0) {setRemainingTime(0);setIsFinished(true);return;}setRemainingTime(diff);setIsFinished(false);}, []);// 格式化時間const formatTime = useCallback((time) => {const duration = dayjs.duration(time);return {days: Math.floor(duration.asDays()),hours: duration.hours(),minutes: duration.minutes(),seconds: duration.seconds(),milliseconds: duration.milliseconds(),};}, []);// 重置倒計時const reset = useCallback(() => {// 更新目標時間引用targetTimeRef.current = dayjs().add(24, "hour").valueOf();setIsFinished(false);calculateRemainingTime();}, [calculateRemainingTime]);useEffect(() => {// 初始化目標時間targetTimeRef.current = targetTime;// 初始化calculateRemainingTime();// 設置定時器const timer = setInterval(() => {calculateRemainingTime();}, interval);// 清理定時器return () => clearInterval(timer);}, [calculateRemainingTime, interval, targetTime]);return {remainingTime,isFinished,formattedTime: formatTime(remainingTime),reset,};
}// hook使用
const { formattedTime, isFinished, reset } = useCountdown(targetTime);10. 日歷組件實現
import { useState, useMemo } from "react";
import dayjs from "dayjs";
import weekOfYear from "dayjs/plugin/weekOfYear";
import isoWeek from "dayjs/plugin/isoWeek";dayjs.extend(weekOfYear);
dayjs.extend(isoWeek);export default function Calendar() {const [currentDate, setCurrentDate] = useState(dayjs());const [selectedDate, setSelectedDate] = useState(dayjs());// 生成日歷數據const calendarData = useMemo(() => {const firstDayOfMonth = currentDate.startOf("month");const lastDayOfMonth = currentDate.endOf("month");const firstDayOfWeek = firstDayOfMonth.day();const daysInMonth = lastDayOfMonth.date();const daysInPrevMonth = firstDayOfMonth.subtract(1, "month").daysInMonth();const days = [];// 上個月的天數for (let i = firstDayOfWeek - 1; i >= 0; i--) {days.push({date: firstDayOfMonth.subtract(i + 1, "day"),isCurrentMonth: false,});}// 當前月的天數for (let i = 1; i <= daysInMonth; i++) {days.push({date: currentDate.date(i),isCurrentMonth: true,});}// 下個月的天數const remainingDays = 42 - days.length; // 6行7列for (let i = 1; i <= remainingDays; i++) {days.push({date: lastDayOfMonth.add(i, "day"),isCurrentMonth: false,});}return days;}, [currentDate]);// 切換月份const changeMonth = (delta) => {setCurrentDate(currentDate.add(delta, "month"));};// 切換年份const changeYear = (delta) => {setCurrentDate(currentDate.add(delta, "year"));};// 判斷是否是今天const isToday = (date) => {return date.isSame(dayjs(), "day");};// 判斷是否是選中日期const isSelected = (date) => {return date.isSame(selectedDate, "day");};return (<div className="w-full max-w-md mx-auto bg-white rounded-lg shadow-lg p-4">{/* 日歷頭部 */}<div className="flex items-center justify-between mb-4"><div className="flex items-center space-x-2"><buttononClick={() => changeYear(-1)}className="p-2 hover:bg-blue-50 rounded-full transition-colors">{"<<"}</button><buttononClick={() => changeMonth(-1)}className="p-2 hover:bg-blue-50 rounded-full transition-colors">{"<"}</button></div><div className="text-lg font-semibold text-blue-600">{currentDate.format("YYYY年 MM月")}</div><div className="flex items-center space-x-2"><buttononClick={() => changeMonth(1)}className="p-2 hover:bg-blue-50 rounded-full transition-colors">{">"}</button><buttononClick={() => changeYear(1)}className="p-2 hover:bg-blue-50 rounded-full transition-colors">{">>"}</button></div></div>{/* 星期標題 */}<div className="grid grid-cols-7 gap-1 mb-2">{["日", "一", "二", "三", "四", "五", "六"].map((day) => (<divkey={day}className="text-center text-sm font-medium text-blue-600 py-2">{day}</div>))}</div>{/* 日歷主體 */}<div className="grid grid-cols-7 gap-1">{calendarData.map(({ date, isCurrentMonth }, index) => (<buttonkey={index}onClick={() => setSelectedDate(date)}className={`aspect-square p-1 text-sm rounded-lg transition-colors${isCurrentMonth? "hover:bg-blue-50": "text-gray-400 hover:bg-gray-50"}${isToday(date) ? "bg-blue-100" : ""}${isSelected(date)? "bg-blue-500 text-white hover:bg-blue-600": ""}`}>{date.date()}</button>))}</div></div>);
}11.國際化
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";dayjs.locale("zh-cn");
dayjs().format("YYYY-MM-DD HH:mm:ss");?更多用法
)
)
