前端开发【插件】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 依然是一个很好的选择。

相关推荐
懈尘几秒前
从 Java 1.7 到 Java 21:逐版本深入解析新特性与平台演进
java·开发语言
凉辰4 分钟前
使用uni.createInnerAudioContext()播放指定音频(踩坑分享功能)
开发语言·javascript·音视频
hello 早上好5 分钟前
05_Java 类加载过程
java·开发语言
PPPPPaPeR.17 分钟前
光学算法实战:深度解析镜片厚度对前后表面折射/反射的影响(纯Python实现)
开发语言·python·数码相机·算法
echoVic18 分钟前
多模型支持的架构设计:如何集成 10+ AI 模型
java·javascript
橙露20 分钟前
Java并发编程进阶:线程池原理、参数配置与死锁避免实战
java·开发语言
froginwe1120 分钟前
C 标准库 - `<float.h>`
开发语言
echoVic22 分钟前
AI Agent 安全权限设计:blade-code 的 5 种权限模式与三级控制
java·javascript
David凉宸24 分钟前
Vue 3 + TS + Vite + Pinia vs Vue 2 + JS + Webpack + Vuex:对比分析
javascript·vue.js·webpack
2501_9160088931 分钟前
深入解析iOS机审4.3原理与混淆实战方法
android·java·开发语言·ios·小程序·uni-app·iphone