有没有办法在没有点击OK按钮的情况下用vuetify选择datepicker中的日期。当我选择日期时,我需要它自动关闭并将其保存到文本字段。 Vuetify版本为0.16
<v-flex xs11 sm3>
<v-dialog
persistent
v-model="startmodal"
lazy
full-width
max-width="290px"
>
<v-text-field
slot="activator"
label="Start Date"
v-model="startdate"
prepend-icon="event"
required
></v-text-field>
<v-date-picker v-model="startdate" scrollable actions>
<template slot-scope="{ save, cancel }">
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat color="primary" @click="cancel">Cancel</v-btn>
<v-btn flat color="primary" @click="save">OK</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-dialog>
</v-flex>
**
答案 0 :(得分:2)
将日期选择器包装到菜单中并添加::: close-on-content-click =“true”
以下是一个例子:
<v-menu
lazy
offset-y
full-width
:close-on-content-click="true"
v-model="menu"
transition="scale-transition"
:nudge-right="40"
max-width="290px"
min-width="290px"
>
<v-text-field
slot="activator"
label="Activation Date"
required
v-model="selectedDate"
prepend-icon="event"
readonly
></v-text-field>
<v-date-picker
show-current
class="mt-3"
v-model="selectedDate"
>
<template slot-scope="{ save, cancel }">
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat color="primary" @click="cancel">Cancel</v-btn>
<v-btn flat color="primary" @click="save">OK</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-menu>