当前位置: 首页 > 工具软件 > Moment.js > 使用案例 >

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

奚才良
2023-12-01

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');

 类似资料: