如图：
image.png
点击哪个tab就返回一个数组 [startDate,endDate]
用到的方法如下：
- 日期格式化：yyyy-MM-dd
- 指定日期获取时间
完整代码如下：
<template>
<div class="data-select">
<div :class="['data-select-btn', dataSelect === item.value && 'select']" v-for="(item,index) in dateBtnArr" :key="index" @click="setSelectDate(item)">{{item.name}}</div>
<Date-picker :value="selectDataArr" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px" @on-change="dateChange"
:class="[dataSelect === 0 && 'select','abc']" @on-open-change="setSelectDate"></Date-picker>
</div>
</template>
<script>
export default {
data () {
return {
dateBtnArr: [{
name: '今日',
value: 1,
dateRange: [0, 0]
}, {
name: '昨日',
value: 2,
dateRange: [-1, -1]
}, {
name: '最近7日',
value: 3,
dateRange: [-6, 0]
}, {
name: '最近30日',
value: 4,
dateRange: [-29, -0]
}],
dataSelect: 1,
selectDataArr: []
}
},
methods: {
// 设置选择时间段数据
setSelectDate (item) {
if (item && item.value) {
this.dataSelect = item.value
this.selectDateData = [this.getDateStr(item.dateRange[0]), this.getDateStr(item.dateRange[1])]
this.$emit('getSelectDate', this.selectDateData)
} else {
this.dataSelect = 0
}
},
// 日期选择框
dateChange (e) {
if (e[0] && e[1]) {
this.selectDataArr = e
this.selectDateData = e
this.$emit('getSelectDate', this.selectDateData)
}
},
// 获取指定天数
getDateStr (AddDayCount) {
var dd = new Date()
// 获取AddDayCount天后的日期
dd.setDate(dd.getDate() + AddDayCount)
return this.fDate(dd)
},
// 事件格式化
fDate (t1, format = 'YYYY-MM-DD') {
const config = {
YYYY: t1.getFullYear(),
MM: t1.getMonth() + 1 > 9 ? t1.getMonth() + 1 : '0' + (t1.getMonth() + 1),
DD: t1.getDate() > 9 ? t1.getDate() : '0' + t1.getDate(),
HH: t1.getHours(),
mm: t1.getMinutes(),
ss: t1.getSeconds()
}
for (const key in config) {
format = format.replace(key, config[key])
}
return format
}
}
}
</script>
<style lang="less" scoped>
.data-select {
display: flex;
align-items: center;
margin-bottom: 10px;
.data-select-btn {
margin-right: 5px;
height: 36px;
line-height: 36px;
padding: 0 10px;
border: 1px solid #e3e5e7;
border-radius: 2px;
cursor: pointer;
}
.select {
background-color: #f1f2f2;
}
}
</style>
<style lang="less">
.statistics {
.ivu-table-wrapper {
border-top: 1px solid rgb(223, 222, 222);
}
}
.select {
.ivu-input-icon-normal + .ivu-input {
background-color: #f1f2f2;
}
.ivu-input:focus {
border: 1px solid #e3e5e7;
}
}
</style>
