Abstraction for dialog / textfield based date selector https://vuetifyjs.com/en/components/date-pickers#examples

App.vue

<template>
	<v-container>
		<v-row>
			<v-col>
				<DateSelectorTextField
					label="Start Date"
					hint="The start and end date can be used to filter results!"
					@selectDate="date => this.startDate = date"
				/>
			</v-col>
			<v-col>
				<DateSelectorTextField label="End Date" @selectDate="date => this.endDate = date" />
			</v-col>
		</v-row>
	</v-container>
</template>

<script>
import DateSelectorTextField from './DateSelectorTextField'

export default {
    data() {
        return {
            startDate: null,
            endDate: null
        }
    }
}
</script>

<style>
</style>

DateSelectorTextField.vue

<template>
	<v-menu
		v-model="menu"
		:close-on-content-click="false"
		transition="scale-transition"
		offset-y
		min-width="290px"
	>
		<template v-slot:activator="{ on }">
			<v-text-field
				prepend-inner-icon="event"
				filled
				:label="label"
				readonly
				v-on="on"
				v-model="date"
				:hint="hint"
				persistent-hint
			></v-text-field>
		</template>
		<v-date-picker v-model="date" no-title scrollable color="primary">
			<v-btn text color="error" @click="saveDate(null)">Clear</v-btn>
			<v-spacer></v-spacer>
			<v-btn text color="primary" @click="menu = false">Cancel</v-btn>
			<v-btn text color="primary" @click="saveDate(date)">Save</v-btn>
		</v-date-picker>
	</v-menu>
</template>

<script>
export default {
	name: 'DateSelectorTextField',
	props: {
		hint: String,
		label: String
	},
	methods: {
		saveDate(date) {
			this.$emit('selectDate', date)
			this.date = date
			this.menu = false
		}
	},
	data: () => ({
		menu: false,
		date: null
	})
}
</script>