moment.js基本用法

书中自有妍如玉

已于 2023-08-11 15:40:48 修改

阅读量1.7k

点赞数

分类专栏：前端文章标签： javascript

于 2022-11-02 11:10:15 首次发布

原文链接：https://blog.csdn.net/halo1416/article/details/83620022

版权

前端专栏收录该内容

133 篇文章 6 订阅

订阅专栏

下载moment.js插件（npm下载很慢，建议使用cnpm或者yarn）

cnpm install moment --save

在main.js中引用moment，并加载Vue对象的原型链上，因为所有VueCompent都继承Vue，所以每个VueComponet都可以直接使用moment

import Moment from 'moment'
Vue.prototype.$moment = Moment

在组中中使用：

let StartDate=this.$moment().add(-1,'months').format("YYYY-MM-DD");//上月
let EndDate=this.$moment().add(1,'days').format("YYYY-MM-DD");//明日

function  BetweenDateDayss(startDate, endDate) { 

        let daysList = [];
        let SDate=moment(startDate);
        let EDate=moment(endDate);
        let xt;
        daysList.push(SDate.format("YYYY-MM-DD"));
        while( SDate.add(1,"days").isBefore( EDate) ){  // 注意这里add方法处理后SDate对象已经改变。      
            daysList.push( SDate.format("YYYY-MM-DD") );
        } 
        daysList.push( EDate.format("YYYY-MM-DD") );
        return daysList;
  }

console.log( BetweenDateDayss('2022-11-09','2022-06-12'))
console.log( BetweenDateDayss('2022-11-09 23:00','2022-11-12 01:00'))
console.log( BetweenDateDayss('2022-11-09 13:00','2022-11-12 21:00'))

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

获取某年某月的最后一天：endOf('month')、endOf('year')

5. 获取星期几

获取星期几： this.moment().day() 或 this.moment(startDate).day() ==>> 当前日期/指定日期是星期几（星期日为 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” 以及 "seconds" 为单位输出！

8. 获取时、分、秒

原理：利用字符串的 split 方法拆分时分秒，然后分别用moment的 hour、minute 和 second 方法；带有日期的可以用 .valueof() 方法。

9. 判断一个日期是否在两个日期之间 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'); // false
b. 自定义是否包含起始日期（四个参数，主要是第四个参数） ==>> 英文网才有四个参数

第三个参数，固定为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, '[]'); //true
12. 判断一个日期是否在另外一个日期前 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