i made vue date range picker manually using v-list and v-date-picker :
<v-card width="600" elevation="1" rounded>
<v-container class="pa-0" fluid>
<v-row dense no-gutters>
<v-col cols="3" style="height: 100%">
<v-list>
<v-list-item-group v-model="select">
<v-list-item v-for="(item, i) in items" :key="i">
<v-list-item-content>
<v-list-item-title v-text="item.time" @click="tes(item.duration)"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-col>
<v-divider></v-divider>
<v-col cols="9">
<v-date-picker ref="tes" v-model="dates" range full-width>
<template>
<v-container class="pa-0">
<v-row>
<v-col cols="6"><YBtn block secondary>Cancel</YBtn></v-col>
<v-col cols="6"><YBtn block>Apply</YBtn></v-col>
</v-row>
</v-container>
</template>
</v-date-picker>
</v-col>
</v-row>
</v-container>
</v-card>
and my script :
export default {
data() {
return {
select: { time: 'Today', duration: 'today' },
items: [
{ time: 'Today', duration: 'today' },
{ time: 'Yesterday', duration: 'yesterday' },
{ time: 'This Month', duration: 'thismonth' },
{ time: 'This Year', duration: 'year' },
{ time: 'Previous Month', duration: 'previousmonth' }
],
dates: [this.$moment().format('YYYY-MM-DD')]
}
},
methods: {
tes(e) {
switch (e) {
case 'yesterday':
this.dates = this.$moment().subtract(1, 'days').format('YYYY-MM-DD')
break
case 'thismonth':
this.dates = [
this.$moment().startOf('month').format('YYYY-MM-DD'),
this.$moment().endOf('month').format('YYYY-MM-DD')
]
console.log(this.dates)
break
case 'year':
this.dates = [
this.$moment().startOf('year').format('YYYY-MM-DD'),
this.$moment().endOf('year').format('YYYY-MM-DD')
]
console.log(this.dates)
break
case 'previousmonth':
this.dates = []
this.dates = [
this.$moment().startOf('month').subtract(1, 'months').format('YYYY-MM-DD'),
this.$moment().endOf('month').subtract(1, 'months').format('YYYY-MM-DD')
]
console.log(this.dates)
break
default:
this.dates = this.$moment().format('YYYY-MM-DD')
break
}
}
}
}
when i click on previous month, it succesfully change v-date-picker value to the selected previous month. but, the navigation still in current month. how do i change v-date-picker navigation focus to selected previous month?