vue+element DatePicker日期选择器封装(可自定义快捷选择时间)
前言
今天封装了一个DatePicker日期选择器，发现带快捷选择的不太好封装，我需要在不同的地方快捷选择不同的时间，并且快捷显示的时间是从昨天开始，在网上找了一圈都没找到便自己写了一个记录一下。
效果
今天是2022年1月3日，最近一周便是从昨天开始往前推一周
我这里只有两种显示快捷选择时间的样式，可以根据具体需求无限加，达到我想要在不同的选择器中显示不同的快捷时间选择的需求。
一、封装组件
创建linechart
linechart：
直接上代码：
直接上代码：
<!--
时间选择器（带快捷选择）
time:时间(必传)
time:{
1:近七天,近三十天,近九十天
2:近一天,近三天,近五天,近三十天
}
<template>
<div class="line_charts">
<el-date-picker
v-model="timedata"
type="daterange"
unlink-panels
:range-separator="$t('to')"
:start-placeholder="$t('start_date')"
:end-placeholder="$t('end_date')"
:picker-options="pickerOptions"
>
</el-date-picker>
</div>
</template>
<script>
export default {
props:{
time:{
default(){
return [];
}
}
},
data(){
return{
timedata:'', //选择时间数据
pickerOptions:{ //快捷选择时间数据
shortcuts: []
},
shortcuts:'',
}
},
methods:{
getshortcuts(){ //快捷选择时间事件
if (this.time == 1) {
this.pickerOptions.shortcuts = [
{
text: '最近七天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7 - 3600 * 1000 * 24 * 1);
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
console.log(picker);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 - 3600 * 1000 * 24 * 1);
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90 - 3600 * 1000 * 24 * 1);
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
picker.$emit('pick', [start, end]);
}
}
]
}else{
this.pickerOptions.shortcuts = [
{
text: '最近一天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1 - 3600 * 1000 * 24 * 1);
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
console.log(picker);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3 - 3600 * 1000 * 24 * 1);
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近五天',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 5 - 3600 * 1000 * 24 * 1);
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 - 3600 * 1000 * 24 * 1);
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
picker.$emit('pick', [start, end]);
}
}
]
}
}
},
mounted(){
this.getshortcuts()
}
}
</script>
二、页面中使用
workBench：
<template>
<div class="workbench">
<linechart
:time=1
></linechart>
</div>
</template>
<script>
import linechart from './visualization/linechart.vue'
export default {
components:{
linechart
},
}
</script>
