3 ways to use vetify datepicker

App.vue

<template>
  <div class="d-flex justify-space-around">
    <v-menu>
      <template v-slot:activator="{ props }">
        <v-text-field
          v-model="date"
          v-bind="props"
          prepend-icon="mdi-calendar"
        ></v-text-field>
      </template>
      <v-date-picker v-model="date"></v-date-picker>
    </v-menu>

    <v-text-field v-model="date" prepend-icon="mdi-calendar">
      <v-menu activator="parent">
        <v-date-picker v-model="date"></v-date-picker>
      </v-menu>
    </v-text-field>

    <!-- <v-btn id="menu-activator" color="primary"> Sibling activator </v-btn> -->
    <v-text-field
      v-model="date"
      id="menu-activator"
      prepend-icon="mdi-calendar"
    >
    </v-text-field>
    <v-menu activator="#menu-activator">
      <v-date-picker v-model="date"></v-date-picker>
    </v-menu>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const items = [{ title: 'item1' }, { title: 'item2' }]
  const date = ref(new Date())
  const msg = ref('Hello World!')
  const menu1 = ref(false)
</script>