Vuetify:如何修复 v-date-picker 不在文本字段中显示所选日期的问题
Vuetify: How to fix v-date-picker not showing the chosen date in the text-field
我正在使用 vue.js / vuetify 2 创建一个表单,其中一个字段是日期事件,所以我使用 v-date-picker 供用户选择日期。问题如下:
日期选择器菜单打开,但无法选择日期。如果单击任何日期,它不会更新菜单。可以更改月份和年份(UI),但仍然不会更新。
由于上述问题,文本字段仍然为空。
我尝试将 vuetify 从版本 1.5 更新到最新版本 2,问题仍然存在。我正在使用 date-fns 来格式化日期,所以我尝试将 v-text-field = "formattedDate" 的值更改为 v-text-field = "date"
热加载后(不是刷新,F5,页面自己热加载),日期出现在表单中,但仍然无法在菜单中更改日期(点击其他日期没有任何作用)。
<template>
<v-app>
<v-content>
<v-layout wrap row mt-2 align-center justify-center>
<v-card width="1050px" height= "690px">
<v-card-title class="display-1 font-weight-medium ">Post-Event Form:</v-card-title>
<v-form>
<v-container>
<v-layout row wrap>
<v-flex md4>
<v-text-field v-model="event" prepend-icon="event" label="Event Name" required></v-text-field>
</v-flex>
<v-flex md3>
<v-menu>
<v-text-field :value="formattedDate" slot="activator" label="Date of event" prepend-icon="date_range"></v-text-field>
<v-date-picker v-model="date"></v-date-picker>
</v-menu>
</v-container>
</v-flex>
</v-form>
</v-content>
</v-app>
</template>
<script>
import format from 'date-fns/format'
export default{
data() {
return {
evenum: int,
event: '',
// date: '',
date: new Date().toISOString().substr(0, 10),
menu1: true,
menu2: true,
}
},
computed: {
formattedDate() {
return this.date ? format(this.date, 'do MMM YYYY') : ''
},
},
}
</script>
我希望有一个功能性的 v-date-picker,一个可以与之交互的菜单(单击/选择日期),然后更新文本字段并显示更新的日期。
实际结果是菜单打开但无法选择日期,文本字段中也没有更新。
试试这个:
<template>
<v-menu
v-model="showPicker"
:close-on-content-click="false"
transition="scale-transition"
offset-y
full-width
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="selectedDate"
label="Choose the date"
hint="YYYY/MM/DD"
persistent-hint
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="selectedDate"
no-title
@input="showPicker = false"
></v-date-picker>
</v-menu>
</template>
<script>
export default {
data: () => ({
showPicker: false,
selectedDate: null,
})
</script>
它是从我正在运行的代码中提取的。
工作示例:Codepen
试试这个:您可以改用 v-model :value
<div id="app">
<v-app id="inspire">
<v-container>
<v-row>
<v-col cols=12 md="4">
<v-menu
v-model="showPicker"
:close-on-content-click="false"
:nudge-right="40"
transition="scale-transition"
offset-y
min-width="290px"
max-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="selectedDate"
label="date"
prepend-icon="mdi-calendar-range"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" @input="closeDateMenu"></v- date-picker>
</v-menu>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
showPicker: false,
selectedDate: null,
date:null,
}),
methods:{
closeDateMenu (){
this.showPicker = false;
this.selectedDate= this.date ? moment(this.date).format('dddd, MMMM Do YYYY') : '';
},
}
})
工作示例:Codepen
我正在使用 vue.js / vuetify 2 创建一个表单,其中一个字段是日期事件,所以我使用 v-date-picker 供用户选择日期。问题如下:
日期选择器菜单打开,但无法选择日期。如果单击任何日期,它不会更新菜单。可以更改月份和年份(UI),但仍然不会更新。
由于上述问题,文本字段仍然为空。
我尝试将 vuetify 从版本 1.5 更新到最新版本 2,问题仍然存在。我正在使用 date-fns 来格式化日期,所以我尝试将 v-text-field = "formattedDate" 的值更改为 v-text-field = "date"
热加载后(不是刷新,F5,页面自己热加载),日期出现在表单中,但仍然无法在菜单中更改日期(点击其他日期没有任何作用)。
<template>
<v-app>
<v-content>
<v-layout wrap row mt-2 align-center justify-center>
<v-card width="1050px" height= "690px">
<v-card-title class="display-1 font-weight-medium ">Post-Event Form:</v-card-title>
<v-form>
<v-container>
<v-layout row wrap>
<v-flex md4>
<v-text-field v-model="event" prepend-icon="event" label="Event Name" required></v-text-field>
</v-flex>
<v-flex md3>
<v-menu>
<v-text-field :value="formattedDate" slot="activator" label="Date of event" prepend-icon="date_range"></v-text-field>
<v-date-picker v-model="date"></v-date-picker>
</v-menu>
</v-container>
</v-flex>
</v-form>
</v-content>
</v-app>
</template>
<script>
import format from 'date-fns/format'
export default{
data() {
return {
evenum: int,
event: '',
// date: '',
date: new Date().toISOString().substr(0, 10),
menu1: true,
menu2: true,
}
},
computed: {
formattedDate() {
return this.date ? format(this.date, 'do MMM YYYY') : ''
},
},
}
</script>
我希望有一个功能性的 v-date-picker,一个可以与之交互的菜单(单击/选择日期),然后更新文本字段并显示更新的日期。
实际结果是菜单打开但无法选择日期,文本字段中也没有更新。
试试这个:
<template>
<v-menu
v-model="showPicker"
:close-on-content-click="false"
transition="scale-transition"
offset-y
full-width
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="selectedDate"
label="Choose the date"
hint="YYYY/MM/DD"
persistent-hint
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="selectedDate"
no-title
@input="showPicker = false"
></v-date-picker>
</v-menu>
</template>
<script>
export default {
data: () => ({
showPicker: false,
selectedDate: null,
})
</script>
它是从我正在运行的代码中提取的。
工作示例:Codepen
试试这个:您可以改用 v-model :value
<div id="app">
<v-app id="inspire">
<v-container>
<v-row>
<v-col cols=12 md="4">
<v-menu
v-model="showPicker"
:close-on-content-click="false"
:nudge-right="40"
transition="scale-transition"
offset-y
min-width="290px"
max-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="selectedDate"
label="date"
prepend-icon="mdi-calendar-range"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" @input="closeDateMenu"></v- date-picker>
</v-menu>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
showPicker: false,
selectedDate: null,
date:null,
}),
methods:{
closeDateMenu (){
this.showPicker = false;
this.selectedDate= this.date ? moment(this.date).format('dddd, MMMM Do YYYY') : '';
},
}
})
工作示例:Codepen