美文网首页
【vue-cli】Moment插件

【vue-cli】Moment插件

作者: 嘻洋洋 | 来源:发表于2021-11-22 17:00 被阅读0次

实际开发中经常要对日期时间进行操作,转换,因此需要一款比较好的日期插件满足我们的开发,Moment.js就是一款JavaScript 日期处理类库,下面具体介绍用法:

1. 使用流程

(1)安装
vue-cli项目中安装

    "vue-moment": "^4.1.0",

(2)作为Vue实例的方式使用
在main.js入口文件中

//引入
import moment from 'vue-moment'
// 挂载全局
Vue.prototype.$Moment = moment // 时间
//组件中使用
this.negative.rangeDate.push(this.$moment(this.$moment().month(this.$moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss'))
//上个月最后一天
this.negative.rangeDate.push(this.$moment(this.$moment().month(this.$moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD HH:mm:ss'))

2. 详细方法介绍

2.1日期格式化

//当期时间
moment().format('YYYY-MM-DD HH:mm:ss');    
//格式化指定日期
moment(this.orderDate).format('YYYY-MM-DD HH:mm:ss');    

2.2 取值

可以根据需要当前(或指定日期)的millisecond毫秒,second秒,minute分,hour小时,date天,day星期几,month月份,quarter季度,year年份,如

moment(this.selectYear).year();
moment().year(Number);
moment().day(Number|String);

2.3 操作

(1)增减时间
增时间使用add函数,例如:当前时间增加7天

moment().add(7, 'days');
//简化
moment().add(7, 'd');

类似增加小时,分,年等等:
years y,quarters Q,months M,weeks w,days d,hours h,minutes m,seconds s,milliseconds ms
减时间使用subtract函数,用法和add函数类似

(2)为时间单位的开头和末尾
比如当月第一天,当年第一天,当月的最后一天,开头使用startOf函数,例如:

moment().startOf('year');    // 设置为今年一月1日 00:00
moment().startOf('month');   // 设置为本月1日上午 00:00
moment().startOf('quarter');  // 设置为当前季度的开始,即每月的第一天上午 00:00
moment().startOf('week');    // 设置为本周的第一天上午 00:00
moment().startOf('isoWeek'); // 根据 ISO 8601 设置为本周的第一天上午 00:00
moment().startOf('day');     // 设置为今天上午 00:00
moment().startOf('date');     // 设置为今天上午 00:00
moment().startOf('hour');    // 设置为当前时间,但是 0 分钟、0 秒钟、0 毫秒
moment().startOf('minute');  // 设置为当前时间,但是 0 秒钟、0 毫秒

当前年的1月1日00时00分00秒

moment().startOf('year');
moment().month(0).date(1).hours(0).minutes(0).seconds(0).milliseconds(0);

末尾使用endOf函数,用法和开头类似
取上个月的时间范围,如:

    console.log(this.$moment(this.$moment().month(this.$moment().month() - 1).startOf('month')).format('YYYY-MM-DD HH:mm:ss'))
    console.log(this.$moment(this.$moment().month(this.$moment().month() - 1).endOf('month')).format('YYYY-MM-DD HH:mm:ss'))

2.3 官方API

http://momentjs.cn/docs/#/get-set/

相关文章

网友评论

      本文标题:【vue-cli】Moment插件

      本文链接:https://www.haomeiwen.com/subject/tlpemltx.html