当前日 getDate()
当前月getMonth()
当前年 getFullYear()
html
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<div id="app">
<template>
<div class="block">
<span class="demonstration">时间范围选择</span>
<el-date-picker
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
</div>
css
@import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");
js
var Main = {
data() {
return {
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
end.setDate(start.getDate() - 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
end.setMonth(start.getMonth() - 1);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
end.setMonth(start.getMonth() - 3);
picker.$emit('pick', [start, end]);
}
},{
text: '最近一年',
onClick(picker) {
const end = new Date();
const start = new Date();
end.setFullYear(start.getFullYear() - 1);
picker.$emit('pick', [start, end]);
}
}{
text: '最近三年',
onClick(picker) {
const end = new Date();
const start = new Date();
end.setFullYear(start.getFullYear() - 3);
picker.$emit('pick', [start, end]);
}
},{
text: '最近五年',
onClick(picker) {
const end = new Date();
const start = new Date();
end.setFullYear(start.getFullYear() - 5);
picker.$emit('pick', [start, end]);
}
},{
text: '最近十年',
onClick(picker) {
const end = new Date();
const start = new Date();
end.setFullYear(start.getFullYear() - 10);
picker.$emit('pick', [start, end]);
}
}
]
},
value2: ''
};
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
没有用时间戳获取年月日(3600*24*天数)可以避免闰年与平年的天数不一样计算误差的问题