I'm currently exploring Vuetify 3 and aiming to implement a textfield that serves as a datepicker. For reference, you can find a similar example in the Vuetify 2 documentation here.
Unfortunately, the Vuetify 3 docs do not yet include an example like this here.
To address this gap, I started creating a prototype as showcased in this Playground
<template>
<v-app>
<v-container>
<v-menu v-model="isMenuOpen" :close-on-content-click="false">
<template v-slot:activator="{ props }">
<v-text-field
label="Selected date"
:model-value="selectedDate"
readonly
v-bind="props"
></v-text-field>
</template>
<v-date-picker v-model="selectedDate"></v-date-picker>
</v-menu>
</v-container>
</v-app>
</template>
<script setup>
import { ref } from 'vue'
const isMenuOpen = ref(false)
const selectedDate = ref()
</script>
I am looking for ways to streamline the datepicker by removing unnecessary elements such as:
- the header section
- the action bar at the bottom
My goal is to have the model update automatically whenever a date is selected.