关于moment.js的常用方法及使用说明

 更新时间:2022年12月08日 14:29:26   作者:halo1416  
这篇文章主要介绍了关于moment.js的常用方法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

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. 两个具体的日期之差(天数,也可以是年)

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

总结

文章仅为本人学习过程的一个记录,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 浅谈js数据类型判断与数组判断

    浅谈js数据类型判断与数组判断

    下面小编就为大家带来一篇浅谈js数据类型判断与数组判断。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JS给元素注册事件的代码

    JS给元素注册事件的代码

    麦鸡的TAB切换功能代码
    2008-10-10
  • Bootstrap表格制作代码

    Bootstrap表格制作代码

    这篇文章主要为大家详细介绍了Bootstrap表格的制作代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 用函数式编程技术编写优美的 JavaScript

    用函数式编程技术编写优美的 JavaScript

    用函数式编程技术编写优美的 JavaScript...
    2006-11-11
  • Bootstrap每天必学之下拉菜单

    Bootstrap每天必学之下拉菜单

    Bootstrap每天必学之下拉菜单,本文讲解的就是大家最为常用的下拉菜单操作,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • TypeScript实现单链表的示例代码

    TypeScript实现单链表的示例代码

    链表是一种物理存储单元上非连续、非顺序的存储结构,本文主要介绍了TypeScript实现单链表的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • js实现模拟计算器退格键删除文字效果的方法

    js实现模拟计算器退格键删除文字效果的方法

    这篇文章主要介绍了js实现模拟计算器退格键删除文字效果的方法,涉及javascript字符串截取操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript中实现sprintf、printf函数

    JavaScript中实现sprintf、printf函数

    这篇文章主要介绍了JavaScript中实现sprintf、printf函数,这两个函数在大多数编程语言中都有,但JS中却没有,本文介绍在js中实现这两个函数功能,需要的朋友可以参考下
    2015-01-01
  • 浅谈Javascript中的函数、this以及原型

    浅谈Javascript中的函数、this以及原型

    下面小编就为大家带来一篇浅谈Javascript中的函数、this以及原型。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 小程序webView实现小程序内嵌H5页面的全过程

    小程序webView实现小程序内嵌H5页面的全过程

    在微信小程序中内嵌H5页面是一种常见的需求,因为H5页面具有灵活性和跨平台性,可以弥补小程序原生代码的不足,这篇文章主要给大家介绍了关于小程序webView实现小程序内嵌H5页面的相关资料,需要的朋友可以参考下
    2024-07-07

最新评论