Vue项目中moment.js常用方法详解与使用指南
本文详细介绍在Vue项目中如何使用moment.js库。涵盖全局挂载与单组件引入两种方式，演示日期初始化、格式化输出、加减运算、获取星期及毫秒数等基础操作。重点解析时间差计算、毫秒转时分秒、日期区间判断(isBetween)及前后比较(isBefore)的高级用法，提供完整代码示例与注意事项。
在Vue项目中使用moment.js时，可将其挂载至Vue原型链以实现全局访问，随后在组件中直接通过this.moment()调用。
若无需全局挂载，可在单个Vue文件（组件）中按需引入使用。
具体做法为：import moment from "moment"; 引入后即可直接调用moment()函数。
1. 初始化日期 / 时间
初始化日期操作如下：
moment().format('YYYY-MM-DD');初始化包含具体时间的日期对象：
moment().format('YYYY-MM-DD HH:mm:ss');2. 格式化日期 / 时间
对日期进行格式化输出：
moment(value).format('YYYY-MM-DD');对日期时间进行格式化输出：
moment(value).format('YYYY-MM-DD HH:mm:ss');3. 加/减 ==>>
执行加减操作前，需先使用this.moment(日期变量)将原始日期转换为moment.js可处理的格式。
执行加法操作：
this.moment().add(1, 'months').format('YYYY-MM-DD'); 示例：当前日期增加一个月，并格式化为'YYYY-MM-DD'。
执行加法操作：
this.moment(startDate).add(2, 'days').format('YYYY-MM-DD') 示例：指定日期（startDate）增加2天，并格式化为'YYYY-MM-DD'。
执行减法操作：
this.moment().subtract(7, 'days'); 示例：当前时间减去7天。
执行加法操作：
this.moment(startDate).subtract(2, 'days').format('YYYY-MM-DD') 示例：指定日期（startDate）减去2天，并格式化为'YYYY-MM-DD'。
4. 获取某年某月的第一天或最后一天
获取指定年月的第一天：使用startOf('month')或startOf('year')。
moment(日期).startOf('month').format("YYYY-MM-DD")//日期可以是 年月的格式 也可以是年月日的格式
moment(日期).startOf('year').format("YYYY-MM-DD")获取指定年月的最后一天：使用endOf('month')或endOf('year')。
moment(日期).endOf('month').format("YYYY-MM-DD")//日期可以是 年月的格式 也可以是年月日的格式
moment(日期).endOf('year').format("YYYY-MM-DD")5. 获取星期几
获取星期几：调用this.moment().day()或this.moment(startDate).day()，返回值为0至6（0代表星期日，6代表星期六）。
6. 获取毫秒数
获取毫秒数：调用this.moment().valueOf()或this.moment(startDate).valueOf()。
注意：获取指定时间的毫秒数时，必须提供完整的日期时间，即startDate需包含日期和时间部分。
7. 获取时间差（以毫秒计算）
计算两个日期或时间的时差：
this.moment(endTime).diff(this.moment(startTime),'days' )示例：计算开始时间与结束时间的时间差，单位为“天”；其中endTime和startTime均为毫秒数。
this.moment(endTime).diff(this.moment(startTime), 'minutes')示例：计算开始时间与结束时间的时间差，单位为“分钟”。
注意：计算时间差时，支持以“years”、“days”、“hours”、“minutes”以及
8. 计算两个具体日期之间的差值（单位可为天数或年数）
9. 提取时、分、秒信息
原理：通过字符串的 split 方法拆分时分秒，随后分别调用 moment 的 hour、minute 和 second 方法；若包含日期信息，可使用 .valueOf() 方法。
const fixStart = '08:00:00'
const getHour = this.moment().hour(Number(fixStart.split(':')[0]));
const getMinute = this.moment().minute(Number(fixStart.split(':')[1]));
const getSecond = this.moment().second(Number(fixStart.split(':')[2]));
// 描述为0，直接写出second(0)
const getHour_Minute_Second = this.moment().hour(Number(fixStart.split(':')[0])).minute(Number(fixStart.split(':')[1])).second(0);
console.log('=====输出',getHour,getMinute,getSecond,getHour_Minute_Second);所得结果均为 moment.js 内部时间格式。可通过 format 方法转换为目标格式，或利用 diff 方法执行时间差计算。
10. 将毫秒数转换为时分秒格式
注意：毫秒转换为其他单位时，若达到目标单位则值为1，超过部分忽略，不足部分为0；
例如 4800000（即80分钟）
- 转换为天：0
- 转换为小时：1
- 转换为分钟：20
- 转换为秒：0
const msTime = 4800000; //80分钟
moment.duration(msTime).hours(); //转为小时，值为1
moment.duration(msTime).minutes(); //转为分钟，值为20
moment.duration(msTime).seconds(); //转为秒，值为0转换为其他单位：
moment.duration(msTime, 'seconds'); //转为秒
moment.duration(msTime, 'minutes'); //转为分
moment.duration(msTime, 'hours'); //转为小时
moment.duration(msTime, 'days'); //转为天
moment.duration(msTime, 'weeks'); //转为周
moment.duration(msTime, 'months'); //转为月
moment.duration(msTime, 'years'); //转为年对应的显示格式：
11. 判断日期是否介于两个日期之间 isBetween
语法：
this.moment().isBetween(moment-like, moment-like, String, String);a. 不包含起始边界日期（仅两个参数） ==>> 中文网文档仅展示两个参数
this.moment('2010-10-20').isBetween('2010-10-19', '2010-10-25'); // true
this.moment('2010-10-19').isBetween('2010-10-19', '2010-10-25'); // false
this.moment('2010-10-25').isBetween('2010-10-19', '2010-10-25'); // falseb. 自定义是否包含起始边界日期（四个参数，核心在于第四个参数） ==>> 英文网文档提供四个参数
第三个参数，固定传 null；
第四个参数，字符串类型，( ) 表示不包含边界，[ ] 表示包含边界。右括号控制起始日期，右括号控制结束日期
this.moment('2016-10-30').isBetween('2016-10-30', '2016-12-30', null, '()'); //false
this.moment('2016-10-30').isBetween('2016-10-30', '2016-12-30', null, '[)'); //true
this.moment('2016-10-30').isBetween('2016-01-01', '2016-10-30', null, '()'); //false
this.moment('2016-10-30').isBetween('2016-01-01', '2016-10-30', null, '(]'); //true
this.moment('2016-10-30').isBetween('2016-10-30', '2016-10-30', null, '[]'); //true12. 判断一个日期是否在另一个日期之前 isBefore
语法： this.moment( end ).isBefore( start ) 参考 moment 文档
a. 默认比较日期
注意：当两个日期相同时，结果同样为 false
moment('2022-04-20').isBefore('2022-04-25'); // true => 第一个日期在第二个日期前
moment('2022-04-28').isBefore('2022-04-25'); // false => 第一个日期不在第二个日期前
moment('2022-04-25').isBefore('2022-04-25'); // false => 两个日期相同b. 第二个参数用于确定精度，因此可以指定检查年份、月份或日期
moment('2010-10-20').isBefore('2010-12-31', 'year'); // false
moment('2010-10-20').isBefore('2011-01-01', 'year'); // true总结
本文仅为本人学习过程的记录，希望能为大家提供参考，也希望大家多多支持本站。
electron-builder打包与发布Electron应用
2026-11-01 05:18:32
Vue结合el-table实现表格行拖拽排序（基于sortablejs）
2026-11-01 01:30:37
详解如何在Vue中进行表单自定义验证
2026-11-01 01:17:28
UniApp 项目中 vue.config.js 配置指南
2026-11-01 00:21:50
uni-app全局变量的四种实现方式总结
2026-11-01 00:15:49
