单击vuetify中的按钮时如何显示日期选择器?
Posted
技术标签:
【中文标题】单击vuetify中的按钮时如何显示日期选择器?【英文标题】:How can I display datepicker when click button in vuetify? 【发布时间】:2020-02-02 16:27:27 【问题描述】:我的脚本是这样的:
===========--=========--=============--======== =======
<template>
<v-card
max-
class="mx-auto"
>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
:return-value.sync="date"
transition="scale-transition"
offset-y
min-
>
<template v-slot:activator=" on ">
<v-text-field
v-model="date"
label="Picker in menu"
prepend-icon="event"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" no-title scrollable>
<div class="flex-grow-1"></div>
<v-btn text color="primary" @click="menu = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.menu.save(date)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-col>
</v-row>
</v-card>
</template>
<script>
export default
data: () => (
date: new Date().toISOString().substr(0, 10),
menu: false,
modal: false,
menu2: false,
),
</script>
结果如下:
它有效。但我想改变这一点。我希望在单击这样的按钮时出现日期选择器:
我该怎么做?
【问题讨论】:
【参考方案1】:你可以试试这个解决方案。
<v-text-field
v-model="date"
label="Picker in menu"
prepend-icon="event"
readonly
>
<template v-slot:append-outer>
<v-btn
icon
color="indigo"
v-bind="attrs"
v-on="on"
>
<v-icon>mdi-calendar</v-icon>
</v-btn>
</template>
</v-text-field>
注意:您可能需要在此处添加 attrs <template v-slot:activator=" on ">
【讨论】:
【参考方案2】:在你的脚本中,替换
<v-text-field
v-model="date"
label="Picker in menu"
prepend-icon="event"
readonly
v-on="on"></v-text-field>
与
<v-btn v-on="on">CALL DATEPICKER</v-btn>
【讨论】:
以上是关于单击vuetify中的按钮时如何显示日期选择器?的主要内容,如果未能解决你的问题,请参考以下文章
Datepicker:单击按钮时如何弹出日期选择器并将值存储在变量中[关闭]