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

相关推荐
paishishaba4 分钟前
处理Web请求路径参数
java·开发语言·后端
七七七七075 分钟前
C++类对象多态底层原理及扩展问题
开发语言·c++
心.c20 分钟前
react当中的this指向
前端·javascript·react.js
春秋半夏30 分钟前
音乐播放、歌词滚动
前端·css
Sioncovy34 分钟前
Zustand 源码阅读计划(3)- JS 篇 - Middlewares 中间件逻辑
前端·javascript
谢娘蓝桥36 分钟前
[Xmos] Xmos架构
开发语言·架构·xmos
多啦C梦a37 分钟前
🪄 这么优雅?`useContext` + 自定义 Hooks:优雅管理全局状态,从主题切换说起
前端·javascript·react.js
yi.Ist43 分钟前
数据结构 —— 栈(stack)在算法思维中的巧妙运用
开发语言·数据结构
患得患失9491 小时前
【前端】【Echarts】ECharts 词云图(WordCloud)教学详解
前端·javascript·echarts
三年三月1 小时前
021-顶点法线与反射原理
javascript·three.js