I am currently utilizing the latest version of vuetify 3 (3.3.4 - lab) date-picker component in my project. To do this, I have created a custom date-input component within my project's component folder.
/components/DateInput.vue
<template>
<div>
<v-menu
v-model="menu"
:close-on-content-click="false"
:nudge-right="40"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ props }">
<v-text-field
v-bind="props"
:value="dateFormatted"
variant="outlined"
append-inner-icon="mdi-calendar"
@change="onChange"
@input="updateDate"
></v-text-field>
</template>
<v-date-picker
:value="getDate"
@change="onChange"
@input="updateDate"
></v-date-picker>
</v-menu>
</div>
</template>
<script>
export default {
props: {
/**
* Date on ISO format to be edited.
* @model
*/
value: {
type: String,
default() {
return ""
},
},
},
data() {
return {
menu: false,
};
},
computed: {
dateFormatted() {
return this.input ? new Date(this.input) : "";
},
getDate() {
/**
* Return ISO 8601
*/
let date = this.input ? new Date(this.input) : new Date();
let month = 1 + date.getMonth();
if (month < 10) {
month = `0${month}`;
}
let day = date.getDate();
if (day < 10) {
day = `0${day}`;
}
return `${date.getFullYear()}-${month}-${day}`;
},
},
methods: {
onChange(val) {
console.error(val)
},
updateDate(val) {
this.menu = false;
console.error(val)
},
},
};
</script>
/App.vue
<template>
<v-container>
<v-row>
<v-col cols="6">
<date-input></date-input>
</v-col>
</v-row>
</v-container>
</template>
<script>
import DateInput from './components/DateInput.vue';
export default {
components: {
DateInput,
},
}
</script>
Whenever I try to select a date, I keep encountering an error similar to the one below:
https://i.sstatic.net/N7hJ8.png
Can someone point out what I might be doing wrong? To help with troubleshooting, I have deployed the project to codesandbox. Here is the link to the sandbox: