Day.js 完整指南：替代 Moment 的现代时间处理方案（含国际化与插件拓展）

@TOC目录

一、Day.js 简介

Day.js 是一个现代化的 JavaScript 日期处理库，体积小巧（只有 2KB），API 与 Moment.js 完全兼容，却更轻量、性能更好，支持链式调用、国际化、插件机制，成为前端项目中替代 Moment 的绝佳选择。

✅ 为什么选择 Day.js？

• 完美兼容 Moment.js API
• 体积小，仅 2KB（Gzip 后）
• 不可变数据，函数式设计
• 支持插件拓展，按需引入
• 开箱即用的国际化支持

二、快速上手

2.1 安装

npm install dayjs

2.2 基本用法

import dayjs from 'dayjs';

const now = dayjs();
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // 2025-04-22 18:00:00

2.3 链式调用

dayjs().add(1, 'day').subtract(2, 'hour').format('YYYY-MM-DD HH:mm');

三、常用功能实践

3.1 日期格式化

dayjs().format('YYYY年MM月DD日 HH:mm'); // 2025年04月22日 18:00

3.2 解析日期字符串

dayjs('2025-04-22 14:00', 'YYYY-MM-DD HH:mm');

3.3 计算时间差

const start = dayjs('2025-04-20');
const end = dayjs('2025-04-22');
console.log(end.diff(start, 'day')); // 2

3.4 判断时间

dayjs().isBefore('2025-05-01'); // true
dayjs().isAfter('2024-01-01');  // true

四、插件机制讲解与实战

Day.js 的核心只提供最小功能，通过插件机制加载更多扩展能力。以下展示几个常用插件的使用与代码示例。

4.1 插件引入方式

import dayjs from 'dayjs';
import plugin from 'dayjs/plugin/xxx';
dayjs.extend(plugin);

4.2 duration 插件：时间间隔格式化

import duration from 'dayjs/plugin/duration';
dayjs.extend(duration);

const d = dayjs.duration({ hours: 2, minutes: 30 });
console.log(`${d.hours()} 小时 ${d.minutes()} 分钟`);

4.3 relativeTime 插件：相对时间描述

import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/zh-cn';

dayjs.extend(relativeTime);
dayjs.locale('zh-cn');

console.log(dayjs().subtract(3, 'minute').fromNow()); // 3 分钟前

4.4 isSameOrBefore / isSameOrAfter

import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
dayjs.extend(isSameOrBefore);

console.log(dayjs('2025-04-20').isSameOrBefore('2025-04-22')); // true

4.5 advancedFormat 插件：增强格式化

import advancedFormat from 'dayjs/plugin/advancedFormat';
dayjs.extend(advancedFormat);

console.log(dayjs().format('Qo 季度，Do 日')); // 2Q 季度，22nd 日

五、国际化支持（内置 40+ 种语言）

5.1 设置语言为中文

import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

console.log(dayjs().format('dddd')); // 星期二

5.2 支持其他语言（如法语）

import 'dayjs/locale/fr';
dayjs.locale('fr');
console.log(dayjs().format('dddd')); // mardi

5.3 配合相对时间显示

import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);

dayjs.locale('fr');
console.log(dayjs().subtract(1, 'hour').fromNow()); // il y a une heure

六、Day.js 与 Moment 的对比表

功能对比	Day.js ✅	Moment.js ❌
体积小（<2KB）	✅	❌（大约 67KB）
函数式 API	✅	❌
不可变	✅	❌
插件机制	✅	❌（功能内置）
性能高	✅	❌
国际化	✅	✅
类型支持（TS）	✅	部分支持

七、Vue 项目中集成方案

7.1 封装工具函数 dayjs.ts

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import duration from 'dayjs/plugin/duration';
import advancedFormat from 'dayjs/plugin/advancedFormat';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';

import 'dayjs/locale/zh-cn';

dayjs.extend(relativeTime);
dayjs.extend(duration);
dayjs.extend(advancedFormat);
dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);
dayjs.locale('zh-cn');

export default dayjs;

7.2 使用方式（示例）

<script setup>
import dayjs from '@/utils/dayjs';

const now = dayjs();
const diff = now.diff('2025-04-20', 'day');
</script>

<template>
  <p>距离 4 月 20 日还有 {{ diff }} 天</p>
</template>

---

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕

---