一分钟让你彻底学会日期时间插件moment.js的使用和常用格式总结

1.前言：

都2022年情人节了，面对PM小姐姐的各种随性日期时间类需求（ps:这个日期组件要默认是当期日的前一月至今；这个日期组件要只能选择当前日至三月之后的日期，其余日期禁用；等等），难不成还在用纯生js来获取new Date（）再根据各API获取对应日期吗。显然是可以的，不过太低效了，在当前时间就是成本的开发环境下，一个强大高效的插件无疑是最优解。快速完成PM小姐姐的需求，脱单指日可待。2333。没错，本文介绍的就是它----moment.js。

2.概述：

学习完本文，你将知道如何高效地在vue中使用moment.js，并学会二十余种需求率最高的日期时间组合。

3.使用篇：

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

3-1. 第一步，需要使用moment.js时，请先安装依赖： npm install moment --save。 3-2. 第二步，依赖安装完成后，需在main.js文件中引入并挂载到原型：

import moment from 'moment'; //引入

Vue.prototype.$moment = moment ; //挂载到原型

moment.locale("zh-CN"); //汉化，否则显示日期格式是国外的日期格式

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

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

4.常用日期时间格式总结：

4-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"));

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

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

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

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

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

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

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

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

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

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

4-7.获取五天前的日期:

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

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

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

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

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

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

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

4-11.获取当前月份的上月份的最后一天：

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

4-12.获取当前年份的第一天：

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

4-13.判断当前时间是哪个季节：

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

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

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

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

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

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

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

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

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

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

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

4-19.常用时间格式和标准时间格式互转：

 
转时间格式
this.$moment().format("YYYY-MM-DD")
// 2020-07-11
 
再转标准时间
new Date('2020-06-05')
// Fri Jun 05 2020 08:00:00 GMT+0800 (中国标准时间)

5.结束语：

以上就是本文的全部内容，让你快速入门并使用moment.js日期时间插件的使用及整理了近二十种日常开发者常用的格式，希望对读者有所帮助（虽然简单，但用到频率较高）。码字不易，还请各路大佬多多三连。也祝大家情人节快乐~~