<template>
<div class="table">
<div class="crumbs">
<el-row class="search_con" :gutter="24" style="margin-bottom:20px;display: flex;align-items: center;">
<el-col :span="3" style="padding-right: 0px;width:81px;">
<label style="color:#333;font-size: 14px;">统计日期:</label>
</el-col>
<el-col :span="5">
<el-date-picker
:clearable="false"
:editable="false"
v-model="datePick"
type="daterange"
placeholder="选择日期范围"
:picker-options="pickerOptions"
range-separator="至"
@change="formatDate">
</el-date-picker>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data() {
let that = this
let _minTime = null
let _maxTime = null
return {
datePick: '',
params: {
startTime: '', // 开始时间
endTime: '', // 结束时间
},
pickerOptions: {
onPick(time){
if (!time.maxDate) {
let timeRange = 89*24*3600*1000
_minTime = time.minDate.getTime() // 最小时间
_maxTime = time.minDate.getTime() + timeRange // 最大时间
} else {
_minTime = _maxTime = null
}
},
disabledDate(time) {
let afterToday = Date.now() - 3600 * 1000 * 24
if (_maxTime) {
_maxTime = (_maxTime <= afterToday) ? _maxTime : afterToday
} else {
return time.getTime() > (Date.now() - 3600 * 1000 * 24)
}
if (_minTime && _maxTime) {
return time.getTime() < _minTime || time.getTime() > _maxTime
}
},
shortcuts: [{
text: '最近7天',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
end.setTime(end.getTime() - 3600 * 1000 * 24)
picker.$emit('pick', [start, end])
}
}, {
text: '最近15天',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
end.setTime(end.getTime() - 3600 * 1000 * 24)
picker.$emit('pick', [start, end])
}
}, {
text: '最近30天',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
end.setTime(end.getTime() - 3600 * 1000 * 24)
picker.$emit('pick', [start, end])
}
}]
}
}
},
methods: {
//设置默认日期7天
defaultDate (){
let start = new Date().getTime() - 3600 * 1000 * 24 * 7
let end = new Date().getTime() - 3600 * 1000 * 24
this.datePick = [start, end]
},
formatDate (val) {
let arr = val.split('至')
this.params.startTime = arr[0]
this.params.endTime = arr[1]
},
},
mounted() {
this.defaultDate()
}
}
</script>
<style lang="less" scoped>
</style>
效果图: