手把手教你学会日期时间插件moment.js的使用和常用格式

1.前言：

对于使用 new Date（）再根据各API获取对应日期，显然是可以的，不过太低效了，在当前时间就是成本的开发环境下，一个强大高效的插件无疑是最优解。本文介绍的就是它----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.常用时间格式和标准时间格式互转：

//Sat

代码解读

复制代码

转时间格式 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日期时间插件的使用及整理了近二十种日常开发者常用的格式，希望对读者有所帮助（虽然简单，但用到频率较高）。