I am looking to create an adaptive date picker using v-date-picker. When the page is viewed on a phone, I want the date picker to open in a v-dialog, and when viewed on a desktop, I want it to open in a v-menu.
Here is my attempt:
<template>
<div>
<template v-if="$vuetify.breakpoint.xsOnly">
<v-dialog
ref="dialog"
v-model="modal"
persistent
width="290px"
>
<template v-slot:activator="{ on }">
<slot name="input" ref="input" v-on="on"/>
</template>
<slot name="picker" ref="picker"/>
</v-dialog>
</template>
<template v-else>
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on }">
<slot name="input" ref="input" v-on="on"/>
</template>
<slot name="picker" ref="picker"/>
</v-menu>
</template>
</div>
</template>
<script>
export default {
name: "v-date",
data() {
return {
menu: false,
modal: false,
}
},
methods: {
close() {
this.menu = false;
this.modal = false;
}
}
}
</script>
However, I encountered issues with v-on not working. I also tried :listeners="on", but that did not work either...
For example usage of the component:
<v-date>
<template v-slot:input>
<v-text-field
label="Deadline"
v-model="data.deadline"
readonly
/>
</template>
<template v-slot:picker>
<v-date-picker v-model="data.deadline" no-title scrollable>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="$refs.deadline.close()">OK</v-btn>
</v-date-picker>
</template>
</v-date>