美文网首页
【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