v-date-picker customize it and have today, last 7 days beside it - vue.js

Question

Hi just got a question if this kind of thing is possible?
enter image description here
this is so far I have done.
<template>
<v-row align="center">
<v-checkbox
v-model="landscape"
label="Landscape"
></v-checkbox>
<v-date-picker
v-model="picker"
landscape
></v-date-picker>
</v-row>
</template>

Answer 1

I solved it using v-card. It was challenging one and been looking for the answer all over, I was like crashing my head on it. The output would be like this:
enter image description here
The complete code:
<template v-if="filters">
<div class="d-flex justify-lg-space-between filter__activities">
<v-text-field
v-model="searchInText"
outlined
dense
append-icon="fas fa-search"
placeholder="Search"
/>
<div class="px-2" />
<v-select
v-model="searchInSelect"
append-icon="fas fa-chevron-down"
item-color="lucky-point"
placeholder="Category"
outlined
dense
:items="types"
:menu-props="{ bottom: true, offsetY: true }"
class="lucky-point--text"
/>
</div>
<div class="filter__activities">
<v-menu
ref="menu1"
v-model="menu1"
:close-on-content-click="false"
transition="scale-transition"
offset-y
bottom
min-width="auto"
>
<template v-slot:activator="{ on }">
<v-text-field
:value="computedDateFormatted"
outlined
dense
placeholder="Select Date"
append-icon="mdi-calendar"
v-on="on"
/>
</template>
<v-card>
<div class="d-flex">
<div class="pa-2 py-16">
<div class="py-1">
<v-btn
plain
class="text-capitalize text-subtitle-1 mine-shaft--text filter__activities-active-btn"
>
Today
</v-btn>
</div>
<div class="py-1">
<v-btn
plain
class="text-capitalize text-subtitle-1 mine-shaft--text"
>
Last 7 days
</v-btn>
</div>
<div class="py-1">
<v-btn
plain
class="text-capitalize text-subtitle-1 mine-shaft--text"
>
Last 30 days
</v-btn>
</div>
<div class="py-1">
<v-btn
plain
class="text-capitalize text-subtitle-1 mine-shaft--text"
>
Last 90 days
</v-btn>
</div>
</div>
<span class="mx-2 mercury--bx-1"></span>
<div>
<v-date-picker
v-model="date"
#input="menu1 = false"
flat
no-title
color="lucky-point"
width="392"
/>
</div>
</div>
</v-card>
</v-menu>
</div>
</template>