我正在尝试使用最新的vuetify 3(3.3.4版本-实验室)日期选择器组件。我在项目组件文件夹中创建了一个日期输入组件。
/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>
当我试图选择一个日期,我总是得到一个错误如下。
我哪里做错了?我将项目部署到codesanbox,这里是codesanbox链接。
https://codesandbox.io/p/github/eguvenc/test/main
1条答案
按热度按时间jdgnovmf1#
那是个bug in the VDatePicker component它已经修复了,但除非你想切换到nightly build,我认为你必须等待下一个版本。
但是,通过传入正确的
:modelValue
属性(您似乎使用了一个不存在的:value
属性),可以避免该问题。注意:modelValue
必须是一个包含Date对象的数组。所以试试这样的:(note不再有
@change
事件,@input
在Vue 3中是@update:modelValue
)。然后让
getDate
返回一个Date数组: