65 lines
1.4 KiB
Vue
65 lines
1.4 KiB
Vue
<template>
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
value-format="yyyy-MM-dd"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
:picker-options="pickerOptions"
|
|
:clearable="false"
|
|
v-on="$listeners"
|
|
/>
|
|
</template>
|
|
<script>
|
|
import { getLastDate, getLastMonth } from '@/utils'
|
|
|
|
export default {
|
|
name: "DateRangePicker",
|
|
props: {
|
|
value: {
|
|
type: Array,
|
|
default: null,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
pickerOptions: {
|
|
shortcuts: [{
|
|
text: '最近一周',
|
|
onClick(picker) {
|
|
const end = getLastDate(0);
|
|
const start = getLastDate(6);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}, {
|
|
text: '最近一个月',
|
|
onClick(picker) {
|
|
const end = getLastDate(0);
|
|
const start = getLastMonth(1);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}, {
|
|
text: '最近三个月',
|
|
onClick(picker) {
|
|
const end = getLastDate(0);
|
|
const start = getLastMonth(3);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}]
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
dateRange: {
|
|
get() {
|
|
return this.value
|
|
},
|
|
set(val) {
|
|
this.$emit('input', val);
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|