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

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

1. 安装 moment.js

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

使用 npm 安装：

npm install moment

使用 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>

2. 基本使用示例

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 对象

const now = moment();  // 获取当前时间
console.log(now);  // 输出：Moment { _d: 2025-01-06T13:45:30.000Z, ... }

2. format() --- 格式化日期和时间

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() --- 增加时间（如加天、月、年等）

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() --- 减少时间

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() --- 判断日期是否在指定日期之前

const date1 = moment('2025-01-01');
const date2 = moment('2025-01-06');

console.log(date1.isBefore(date2)); // true

6. isAfter() --- 判断日期是否在指定日期之后

console.log(date2.isAfter(date1)); // true

7. isSame() --- 判断日期是否相同

const date1 = moment('2025-01-06');
const date2 = moment('2025-01-06');
console.log(date1.isSame(date2, 'day')); // true

8. diff() --- 计算两个日期之间的差值

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() --- 获取某个单位（如开始或结束时间）

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() --- 以日历的形式格式化日期

const now = moment();
console.log(now.calendar());  // Today at 1:45 PM

11. toDate() --- 转换为原生 JavaScript Date 对象

const momentObj = moment();
const jsDate = momentObj.toDate();
console.log(jsDate);  // 2025-01-06T13:45:30.000Z

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

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

示例项目代码

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. 其他有用的功能

• 设置语言：

  moment.locale('zh-cn');  // 设置为中文

• 获取 Unix 时间戳：

  const timestamp = moment().unix();  // 获取当前 Unix 时间戳
  console.log(timestamp);

• 从 Unix 时间戳创建日期：

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

总结

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