Here is the structure of my script:
===========--=========--=============--===============
<template>
<v-card
max-width="1200"
class="mx-auto"
>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
:return-value.sync="date"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="date"
label="Picker in menu"
prepend-icon="event"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" no-title scrollable>
<div class="flex-grow-1"></div>
<v-btn text color="primary" @click="menu = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.menu.save(date)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-col>
</v-row>
</v-card>
</template>
<script>
export default {
data: () => ({
date: new Date().toISOString().substr(0, 10),
menu: false,
modal: false,
menu2: false,
}),
}
</script>
The current output can be found here : https://i.stack.imgur.com/SEUDF.png
While the functionality works, I am interested in making a change. Instead of having the datepicker appear within a menu, I would like it to show up when a button is clicked as shown here: https://i.stack.imgur.com/cjIr2.png
What steps should I take to achieve this?