app/components/Ui/DatePicker.vue

<template>
  <v-layout row wrap>
    <v-menu
      ref="menu"
      v-model="menu"
      :close-on-content-click="false"
      :nudge-right="40"
      :return-value.sync="modelValue"
      lazy
      transition="scale-transition"
      offset-y
      full-width
      min-width="290px"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-text-field
          v-model="displayDate"
          :label="label"
          readonly
          v-on="on"
          @blur="menu = false"
        ></v-text-field>
      </template>
      <v-date-picker
        color="primary"
        :model-value="modelValue"
        :locale="i18n.locale.value"
        @update:model-value="updateDate"
        no-title
        scrollable
        @change="menu = false"
        
      >
      </v-date-picker>
    </v-menu>
  </v-layout>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'

const props = defineProps({
  modelValue: Date,
  label: String,
})

const emit = defineEmits(['update:modelValue'])

const i18n = useI18n()
const menu = ref(false)

const displayDate = computed({
  get: () =>
    props.modelValue
      ? props.modelValue.toLocaleDateString(i18n.locale.value)
      : '',
  set: (val) => {},
})

function updateDate(value) {
  emit('update:modelValue', value)
  menu.value = false
}
</script>