前端开发【插件】moment 基本使用详解【日期】

moment.js 是一个非常流行的 JavaScript 库,用于处理和操作日期与时间。它提供了丰富的 API 来处理各种日期、时间和格式化的操作。尽管随着 Date API 的增强,moment.js 被视为"过时",并且推荐使用 date-fnsluxon 等库来替代,但仍然有很多现有的项目中使用 moment.js

1. 安装 moment.js

你可以通过 npm 或直接在 HTML 中引入来安装 moment.js

使用 npm 安装:
bash 复制代码
npm install moment
使用 CDN 引入:
html 复制代码
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>

2. 基本使用示例

javascript 复制代码
const moment = require('moment');

// 获取当前时间
console.log(moment().format()); // 输出 ISO 8601 格式:2025-01-06T13:45:30+08:00

// 获取当前日期
console.log(moment().format('YYYY-MM-DD')); // 输出:2025-01-06

// 获取当前时间(小时:分钟:秒)
console.log(moment().format('HH:mm:ss')); // 输出:13:45:30

3. 常见函数

1. moment() --- 创建一个当前时间的 moment 对象
javascript 复制代码
const now = moment();  // 获取当前时间
console.log(now);  // 输出:Moment { _d: 2025-01-06T13:45:30.000Z, ... }
2. format() --- 格式化日期和时间
javascript 复制代码
const now = moment();
console.log(now.format('YYYY-MM-DD')); // 格式:2025-01-06
console.log(now.format('MMMM Do YYYY, h:mm:ss a')); // 格式:January 6th 2025, 1:45:30 pm
console.log(now.format('dddd')); // 星期几:Monday
3. add() --- 增加时间(如加天、月、年等)
javascript 复制代码
const today = moment();
console.log(today.add(7, 'days').format('YYYY-MM-DD'));  // 增加 7 天
console.log(today.add(1, 'months').format('YYYY-MM-DD')); // 增加 1 个月
console.log(today.add(2, 'years').format('YYYY-MM-DD')); // 增加 2 年
4. subtract() --- 减少时间
javascript 复制代码
const today = moment();
console.log(today.subtract(1, 'weeks').format('YYYY-MM-DD')); // 减去 1 周
console.log(today.subtract(3, 'days').format('YYYY-MM-DD')); // 减去 3 天
5. isBefore() --- 判断日期是否在指定日期之前
javascript 复制代码
const date1 = moment('2025-01-01');
const date2 = moment('2025-01-06');

console.log(date1.isBefore(date2)); // true
6. isAfter() --- 判断日期是否在指定日期之后
javascript 复制代码
console.log(date2.isAfter(date1)); // true
7. isSame() --- 判断日期是否相同
javascript 复制代码
const date1 = moment('2025-01-06');
const date2 = moment('2025-01-06');
console.log(date1.isSame(date2, 'day')); // true
8. diff() --- 计算两个日期之间的差值
javascript 复制代码
const date1 = moment('2025-01-01');
const date2 = moment('2025-01-06');

// 计算差值
const daysDifference = date2.diff(date1, 'days');
console.log(daysDifference); // 5 天
9. startOf()endOf() --- 获取某个单位(如开始或结束时间)
javascript 复制代码
const today = moment();

// 获取当月的第一天
console.log(today.startOf('month').format('YYYY-MM-DD')); // 2025-01-01

// 获取当月的最后一天
console.log(today.endOf('month').format('YYYY-MM-DD')); // 2025-01-31
10. calendar() --- 以日历的形式格式化日期
javascript 复制代码
const now = moment();
console.log(now.calendar());  // Today at 1:45 PM
11. toDate() --- 转换为原生 JavaScript Date 对象
javascript 复制代码
const momentObj = moment();
const jsDate = momentObj.toDate();
console.log(jsDate);  // 2025-01-06T13:45:30.000Z

4. 在实际项目中的应用:日期处理

假设你正在开发一个项目,其中需要显示用户的注册时间、计算两次活动之间的时间差,并展示时间的相对表达形式(如"3小时前"、"昨天")。

示例项目代码
javascript 复制代码
const moment = require('moment');

// 用户注册时间
const registrationTime = moment('2024-12-01T08:30:00');

// 显示用户注册的时间
console.log("用户注册时间:" + registrationTime.format('YYYY-MM-DD HH:mm:ss')); // 2024-12-01 08:30:00

// 计算当前时间与注册时间之间的差值
const now = moment();
const daysSinceRegistration = now.diff(registrationTime, 'days');
console.log(`用户注册已有 ${daysSinceRegistration} 天`);

// 显示时间的相对表示(例如:3小时前、昨天等)
console.log("注册时间的相对表示:" + registrationTime.from(now)); // 3 weeks ago

// 如果用户登录时间在当天,显示"今天"
const loginTime = moment();
if (loginTime.isSame(now, 'day')) {
  console.log("用户今天登录");
} else {
  console.log("用户不是今天登录");
}

5. 时间格式化的常用格式

  • YYYY --- 四位年份(例如 2025)
  • MM --- 两位月份(例如 01、12)
  • DD --- 两位日期(例如 01、31)
  • HH --- 两位小时(24小时制,00-23)
  • mm --- 两位分钟(00-59)
  • ss --- 两位秒钟(00-59)
  • a --- 小写的"am"或"pm"
  • MMMM --- 完整月份名(例如 January、February)

6. 其他有用的功能

  • 设置语言:

    javascript 复制代码
    moment.locale('zh-cn');  // 设置为中文
  • 获取 Unix 时间戳:

    javascript 复制代码
    const timestamp = moment().unix();  // 获取当前 Unix 时间戳
    console.log(timestamp);
  • 从 Unix 时间戳创建日期:

    javascript 复制代码
    const dateFromTimestamp = moment.unix(1609459200);  // 使用 Unix 时间戳创建日期
    console.log(dateFromTimestamp.format('YYYY-MM-DD'));  // 输出:2021-01-01

总结

moment.js 提供了许多功能强大的日期处理和格式化工具,它能帮助你在前端开发中轻松处理时间和日期。尽管它的更新已停止,但在很多项目中仍然被广泛使用。对于新项目,建议考虑使用 date-fnsluxon 等更现代的库。但如果你正在处理现有的项目并需要日期处理,moment.js 依然是一个很好的选择。

相关推荐
Biomamba生信基地1 分钟前
R语言基础| 中级绘图
开发语言·r语言
你选择放弃就不要再回头8 分钟前
Vue3动态时间显示
javascript·vue
wclass-zhengge33 分钟前
05容器篇(D2_集合 - D5_企业容器常用 API)
java·开发语言
EnticE15233 分钟前
[项目实战2]贪吃蛇游戏
开发语言·数据结构·c++·游戏
北冥有鱼-.41 分钟前
Java到底是值传递还是引用传递????
java·开发语言
wangqiaowq1 小时前
通过 crontab 每天定时启动一个 Java JAR 包并调用特定的 `main` 方法
开发语言·python
YONG823_API1 小时前
如何通过API实现淘宝商品评论数据抓取?item_review获取淘宝商品评论
大数据·开发语言·javascript·数据库·网络爬虫
一点一木1 小时前
前端报告 2024:全新数据,深度解析未来趋势
前端·javascript·vue.js
Milk夜雨1 小时前
初步认识UML
开发语言·uml
失眠的咕噜1 小时前
vue 导出excel接口请求和axios返回值blob类型处理
前端·javascript·vue.js