Moment.js的基本使用

小胖梅前端

已于 2023-06-25 10:19:37 修改

阅读量2.2w

点赞数 15

分类专栏：前端 vue 文章标签： javascript 前端开发语言

于 2022-11-11 23:22:20 首次发布

本文链接：https://blog.csdn.net/xm1037782843/article/details/127814378

版权

前端同时被 2 个专栏收录

42 篇文章 28 订阅

订阅专栏

vue

30 篇文章 21 订阅

订阅专栏

个人录制的最新Vue项目学习视频：B站

小胖梅-的个人空间_哔哩哔哩_Bilibili

欢迎观看个人B站视频，有项目中使用方法

一、Moment.js的简介

Moment.js是一个轻量级的JavaScript时间库，以前我们转化时间，都会进行很复杂的操作，而Moment.js的出现，简化了我们开发中对时间的处理，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。

二、在Vue中使用

1. 安装

npm install moment  或者  yarn add moment

2. 使用

vue项目中，需要把 moment.js 挂载到全局上（即vue的原型链上），访问时直接使用 this.moment() ;

vue项目中不挂载到全局，单文件（单组件）使用：

==>> import moment from "moment"; 然后直接使用 moment()

// require 方式
var moment = require('moment');

// import 方式
import moment from 'moment';

3. 常用方法

常用方法在moment.js官网

平常使用记住一句话：将来就是加add，曾经就是减subtract, 现在是moment()，复杂的加减可以使用链式
链式操作举例：moment().add(7, ‘days’).subtract(1, ‘months’) // 意思为当前日期加上7天再减去一个月，时分秒和当前保持一致

解释：

日历时间
// 日历格式为昨天、明天、下周三这种表达，去掉calendar就是正常格式返回
// days可以换成months、hours、seconds、years
moment().subtract(10, ‘days’).calendar(); // 当前时间减10天，以日历时间格式返回————2021/03/28
moment().subtract(6, ‘days’).calendar(); // 当前时间减6天，以日历时间格式返回————上星期四10:27
moment().subtract(1, ‘days’).calendar(); // 前时间减1天，以日历时间格式返回————昨天10:27
moment().calendar(); // 当前时间————今天10:27
moment().add(1, ‘days’).calendar(); // 当前时间加1天，以日历时间格式返回————明天10:27
moment().add(3, ‘days’).calendar(); // 当前时间加三天，以日历时间格式返回————下星期六10:27
moment().add(10, ‘days’).calendar(); // 当前时间加10天，以日历时间格式返回————2021/04/17

注：subtract vt. 减去；扣掉，即以前的时间
add vt. 增加，添加，即将来的时间
calendar n. 日历

时间点及格式化
console.log(moment().format(“YYYY-MM-DD HH:mm:ss”)); //当前时间
console.log(moment().subtract(10, “days”).format(“YYYY-MM-DD”)); //当前时间的前10天时间
console.log(moment().subtract(1, “years”).format(“YYYY-MM-DD”)); //当前时间的前1年时间
console.log(moment().subtract(3, “months”).format(“YYYY-MM-DD”)); //当前时间的前3个月时间
console.log(moment().subtract(1, “weeks”).format(“YYYY-MM-DD”)); //当前时间的前一个星期时间

4. 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'

代码演示

时间加+1

// 年份+1
moment().add(1, 'years')
moment().add({years: 1})

// 月份+1
moment().add(1, 'months')

// 日期+1
moment().add(1, 'days')

// 星期+1
moment().add(1, 'weeks')

// 小时+1
moment().add(1, 'hours')

// 分钟+1
moment().add(1, 'minutes')

// 秒数+1
moment().add(1, 'seconds')

时间减-1

// 年份-1
moment().subtract(1, 'years')
moment().subtract({years: 1})

// 月份-1
moment().subtract(1, 'months')

// 日期-1
moment().subtract(1, 'days')

// 星期-1
moment().subtract(1, 'weeks')

// 小时-1
moment().subtract(1, 'hours')

// 分钟-1
moment().subtract(1, 'minutes')

// 秒数-1
moment().subtract(1, 'seconds')

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")