我的codepen是这样的:https://codepen.io/positivethinking639/pen/mddejJN
我的代码是这样的:
<div id="app">
<v-app>
<v-content>
<v-container>
<v-dialog
ref="dialogTest"
v-model="modalTest"
:return-value.sync="dateTest"
persistent
>
<template v-slot:activator="{ on }">
<v-btn color="success" dark v-on="on">call date</v-btn>
</template>
<div class="text-center title">Select a Date & Time</div>
<v-row justify="center">
<v-date-picker v-model="dateTest" scrollable :allowed-dates="allowedDates">
<div class="flex-grow-1"></div>
<v-btn text color="primary" @click="modalTest = false">Cancel</v-btn>
<v-btn text color="primary" @click="saveData">OK</v-btn>
</v-date-picker>
<v-slide-y-transition>
<v-col cols=2 v-show="dateTest !== null">
<template v-for="allowedTime in allowedTimes">
<v-btn
@click="setTime(allowedTime)"
class="my-2"
:outlined="allowedTime !== time"
block
x-large
color="primary"
>{{ allowedTime }}</v-btn>
</template>
</v-col>
</v-slide-y-transition>
</row>
</v-dialog>
{{dateTest}}
</v-container>
</v-content>
</v-app>
</div>
如果我单击“通话日期”按钮,它将调用datepicker。如果我选择一个日期,我希望它调用一个方法
我该怎么做?
您可以使用@change="myMethod"
或@click:date="myMethod"
上v-date-picker
。阅读vuetifydate-picker
文档(事件部分)以获取更多信息。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句