moment.js在vue中的使用及时间插件moment.js的常用时间格式总结

1.前言：本文仅针对时间插件moment.js在vue中结合elm组件的基本使用及最常见的几种时间格式总结，可视为‘cv’大法的精髓之作（极大提高开发效率，算了，直接说懒吧，即贴即用）；不作深入，有需深入moment.js的同学可自行前往官网学习。

2.使用篇：

2-1：实际开发中一般都是结合element或者iview等组件库的日期组件使用。所以使用moment.js前请自行安装引入这些组件库（太过简单，这里不作累述）。

2-2：第一步，需要使用moment.js时，请先安装依赖：

npm install moment --save

第二步，依赖安装完成后，需在main.js文件中引入并挂载到原型：

//引入
import moment from 'moment';
//挂载到原型
Vue.prototype.$moment = moment ;
//汉化，否则显示日期格式是国外的日期格式
moment.locale("zh-CN");

第三步，在需使用的文件内结合elm日期组件使用（因在main.js中通过$moment注入到vue原型，所以在具体组件使用时可通过this.$moment()来调用）：

<template>
  <div class="about">
    <div class="block">
      <span class="demonstration">默认日期</span>
      <el-date-picker
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
  </div>
</template>


<script>
export default {
  name: "About",
  data() {
    return {
      //默认日期为当月第一天至今天
      date: [  
        this.$moment().startOf("month").format("YYYY-MM-DD"),
        this.$moment().format("YYYY-MM-DD"),
      ],
    };
  },
};
</script>

3.总结篇：

3-1:常用的axios提交表单日期转换格式：

data.append('date',this.$moment(this.formValidate.date).format("YYYY-MM-DD 00:00:00"))

data.append('date',this.$moment(this.formValidate.date).format("YYYY-MM-DD 23:59:59"))

data.append('date',this.$moment(this.formValidate.date).format("YYYY-MM-DD"))

3-2:当前月份的上一个月.

new Date(this.$moment().subtract(1, 'month').format('YYYY-MM'))   //当前月份的上一个月

3-3:获取前一天日期.

var t = this.$moment().day(0).format('YYYY-MM-DD');

3-4:获取上个月今天的日期.

var t2 = this.$moment().subtract(1, 'months').format('YYYY-MM-DD');

3-5:获取去年今天的日期，格式以YYYY-MM-DD显示，即简便的获取去年今天日期的方法.

var t3 = this.$moment().subtract(1, 'year').format('YYYY-MM-DD');

3-6:获取两个小时之后的时间.

var t4 = this.$moment().add(2,'hours').format('YYYY-MM-DD HH:mm:ss');

3-7:获取五天前的日期:

var t5 = this.$moment().subtract(5, 'days').format('YYYY-MM-DD');

3-8:获取当前月份的第一天.

this.$moment().startOf("month").format("YYYY-MM-DD");

3-9:获取当前月份的最后一天.

this.$moment().endOf('month').format("YYYY-MM-DD");

3-10:获取当前月份的上月份的第一天.

this.$moment().subtract(1, 'months').startOf('month').format('YYYY-MM-DD');

3-11:获取当前月份的上月份的最后一天.

this.$moment().subtract(1, 'months').endOf('month').format('YYYY-MM-DD');

3-12:获取当前年份的第一天.

this.$moment().startOf('year').format("YYYY-MM-DD");

3-13:判断当前时间是哪个季节.

this.$moment(new Date()).quarter();

3-14:判断当前时间是今年的哪一周.

this.$moment(new Date()).week(); 

3-15:时间范围：最近七天（七天之前--今天）.

date: [
        new Date(this.$moment().subtract(7, "days").format("YYYY-MM-DD")),
        new Date(),
      ],

3-16:时间范围：最近一月（一月之前的今天--今天）.

date: [
        this.$moment(new Date()).subtract(1, "months").format("YYYY-MM-DD"),
        this.$moment().format("YYYY-MM-DD"),
      ],

3-17:时间范围：本月（本月的第一天--本月的最后一天）.

date: [
        this.$moment().startOf("month").format("YYYY-MM-DD"),
        this.$moment().endOf("month").format("YYYY-MM-DD"),
      ],

3-18:时间范围：本月的第一天到今天（本月的第一天--今天）.

date: [
        this.$moment().startOf("month").format("YYYY-MM-DD"),
        this.$moment().format("YYYY-MM-DD"),
      ],

3-19:常用时间格式和标准时间格式互转.

new Date()
//Sat Jul 11 2020 17:58:36 GMT+0800 (中国标准时间)

转时间格式
this.$moment().format("YYYY-MM-DD")
// 2020-07-11

再转标准时间
new Date('2020-06-05')
// Fri Jun 05 2020 08:00:00 GMT+0800 (中国标准时间)

3-20：获取当前日期n周后的日期。

this.moment(new Date()).add(n, 'weeks').format('YYYY-MM-DD')

3-21:获取某一日期n周后的日期。

this.moment(new Date(this.ruleForm.zpsj)).add(n, 'weeks').format('YYYY-MM-DD');