为什么选择Day.js?比Moment.js更轻更快的日期处理神器

在JavaScript开发中,处理日期和时间常常让人头大。过去我们多依赖 Moment.js,但随着ES模块与新项目对性能的苛刻要求,Day.js以"极简API、2k体积、与Moment高度兼容"成为新宠。本文带你从入门到实战,系统掌握Day.js!


1. 安装与入门

安装

  • Node.js 使用npm:
bash 复制代码
npm install dayjs
  • Browser 使用cdn:
html 复制代码
<!-- CDN example (jsDelivr) --> <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script> <script>dayjs().format()</script>

快速体验

js 复制代码
const dayjs = require('dayjs'); // Node环境

console.log(dayjs().format()); //当前时间 例如: 2025-05-30T09:55:02+08:00

2. Day.js的基本用法

2.1 创建日期对象

js 复制代码
dayjs();                            // 当前时间
dayjs('2024-06-01');                // 指定日期
dayjs('2024-06-01 12:00', 'YYYY-MM-DD HH:mm'); // 指定格式
dayjs(1716816000000);               // 时间戳(毫秒)

2.2 格式化日期

js 复制代码
dayjs().format('YYYY-MM-DD HH:mm:ss'); // 2025-05-30T09:55:02+08:00
dayjs('2024-06-01').format('dddd');    // Saturday

2.3 取日期各项

js 复制代码
dayjs().year();  // 2024
dayjs().month(); // 0~11,0为1月
dayjs().date();  // 几号
dayjs().hour();  // 小时
dayjs().minute(); // 分
dayjs().second(); // 秒
dayjs().day();   // 星期几(0=周日)

3. 日期计算

3.1 加减时间

js 复制代码
dayjs().add(7, 'day').format('YYYY-MM-DD');    // 加7天
dayjs().subtract(1, 'month').format('YYYY-MM'); // 减1月

3.2 日期差值

js 复制代码
const start = dayjs('2024-06-01');
const end = dayjs('2024-06-20');
end.diff(start, 'day');   // 19
end.diff(start, 'month'); // 0

支持单位: 'year', 'month', 'week', 'day', 'hour', 'minute', 'second'

3.3 判断日期

js 复制代码
const d1 = dayjs('2024-06-01');
const d2 = dayjs('2024-07-01');
d1.isBefore(d2);    // true
d1.isAfter(d2);     // false
d1.isSame('2024-06-01', 'day'); // true

4. 进阶玩法------解析与插件系统

Day.js核心功能"够用即止",更多高级需求需"插件"支持。

4.1 本地化(多语言)

js 复制代码
const dayjs = require('dayjs');
const localizedFormat = require('dayjs/plugin/localizedFormat');
const localeLan = require('dayjs/locale/zh-cn');
dayjs.extend(localizedFormat); // 加载本地化格式插件
dayjs.locale(localeLan); // 使用中文

console.log(dayjs().format('LLLL')); // 2025年5月30日星期五上午10点27分

format格式可以参考day.js.org/docs/zh-CN/...

4.2 定制解析与显示

  • 自定义格式解析
js 复制代码
const customParseFormat = require('dayjs/plugin/customParseFormat');
dayjs.extend(customParseFormat);

const d = dayjs('2024年06月01日', 'YYYY年MM月DD日');
console.log(d.format('YYYY-MM-DD')); // 2024-06-01

4.3 时间区间(isBetween)

js 复制代码
const isBetween = require('dayjs/plugin/isBetween');
dayjs.extend(isBetween);

let now = dayjs('2024-06-10');
console.log(now.isBetween('2024-06-01', '2024-06-20')); // true

4.4 相对时间(fromNow)

js 复制代码
const dayjs = require('dayjs');
const localizedFormat = require('dayjs/plugin/localizedFormat');
const localeLan = require('dayjs/locale/zh-cn');
const relativeTime = require('dayjs/plugin/relativeTime');
dayjs.extend(localizedFormat); // 加载本地化格式插件
dayjs.locale(localeLan); // 使用中文
dayjs.extend(relativeTime);

console.log(dayjs().subtract(1, 'day').fromNow()); // "1天前"
console.log(dayjs().add(2, 'hour').fromNow());     // "2小时内"

5. 总结

  • 体积小、API现代、用法极像Moment、扩展性极佳。
  • 适合前端/Node后端所有涉及时钟、日期、倒计时、提醒等场景。
  • 更多高级玩法推荐直接查看 官方插件列表

点个赞,关注我获取更多实用 JavaScript 技术干货!如果觉得有用,记得收藏本文!

相关推荐
wearegogog1235 小时前
基于 MATLAB 的卡尔曼滤波器实现,用于消除噪声并估算信号
前端·算法·matlab
Drawing stars5 小时前
JAVA后端 前端 大模型应用 学习路线
java·前端·学习
品克缤5 小时前
Element UI MessageBox 增加第三个按钮(DOM Hack 方案)
前端·javascript·vue.js
小二·5 小时前
Python Web 开发进阶实战:性能压测与调优 —— Locust + Prometheus + Grafana 构建高并发可观测系统
前端·python·prometheus
小沐°5 小时前
vue-设置不同环境的打包和运行
前端·javascript·vue.js
qq_419854056 小时前
CSS动效
前端·javascript·css
烛阴6 小时前
3D字体TextGeometry
前端·webgl·three.js
桜吹雪6 小时前
markstream-vue实战踩坑笔记
前端
南村群童欺我老无力.7 小时前
Flutter应用鸿蒙迁移实战:性能优化与渐进式迁移指南
javascript·flutter·ci/cd·华为·性能优化·typescript·harmonyos
C_心欲无痕7 小时前
nginx - 实现域名跳转的几种方式
运维·前端·nginx