72 lines
2.0 KiB
Vue
72 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
|
||
|
|
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
|
||
|
|
</el-date-picker>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
pickerOptions: {
|
||
|
|
shortcuts: [
|
||
|
|
{
|
||
|
|
text: '今天',
|
||
|
|
onClick (picker) {
|
||
|
|
// 设置日期范围为今天
|
||
|
|
const end = new Date()
|
||
|
|
const start = new Date()
|
||
|
|
picker.$emit('pick', [start, end])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: '上月',
|
||
|
|
onClick (picker) {
|
||
|
|
const end = new Date()
|
||
|
|
const start = new Date()
|
||
|
|
start.setMonth(end.getMonth() - 1)
|
||
|
|
start.setDate(1)
|
||
|
|
end.setDate(0)
|
||
|
|
picker.$emit('pick', [start, end])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: '最近一周',
|
||
|
|
onClick (picker) {
|
||
|
|
const end = new Date()
|
||
|
|
const start = new Date()
|
||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||
|
|
picker.$emit('pick', [start, end])
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
text: '最近一个月',
|
||
|
|
onClick (picker) {
|
||
|
|
const end = new Date()
|
||
|
|
const start = new Date()
|
||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||
|
|
picker.$emit('pick', [start, end])
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
text: '最近三个月',
|
||
|
|
onClick (picker) {
|
||
|
|
const end = new Date()
|
||
|
|
const start = new Date()
|
||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||
|
|
picker.$emit('pick', [start, end])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
value1: '',
|
||
|
|
value2: ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.el-date-editor .el-range__close-icon {
|
||
|
|
display: block !important;
|
||
|
|
}
|
||
|
|
</style>
|