moment.js在vue中的使用及时间插件moment.js的常用时间格式总结
1.前言:本文仅针对时间插件moment.js在vue中结合elm组件的基本使用及最常见的几种时间格式总结,可视为‘cv’大法的精髓之作(极大提高开发效率,算了,直接说懒吧,即贴即用);不作深入,有需深入moment.js的同学可自行前往它的官网http://momentjs.cn/学习。2.使用篇:2-1:实际开发中一般都是结合element或者iview等组件库的日期组件使用。所以使用mome
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');
更多推荐
所有评论(0)