如何在vuetify中自定义日期选择器? [英] How can I custom datepicker in the vuetify?
问题描述
我想这样设置datetimepicker: https://vuetifyjs.com / en /开始使用/咨询和支持。如果单击 2小时咨询会议,它将显示如下所示的datetimepicker: https://ibb.co/kHrbHTG一个>。我想那样做。但是我在文档中找不到组件datetimepicker。 docs: https://vuetifyjs.com/en/components/date-pickers
I want to make datetimepicker like this : https://vuetifyjs.com/en/getting-started/consulting-and-support. If you click "2 Hour Consulting Session", it will display datetimepicker like this : https://ibb.co/kHrbHTG. I want to make like that. But I don't find the component datetimepicker in the documentation. The docs : https://vuetifyjs.com/en/components/date-pickers
根据我的分析,它使用datepicker模式。不是datepimepicker。仅使用轮廓按钮自定义时间选择器。但是我很困惑如何在日期选择器旁边放置大纲按钮
Based on my analysis, it uses datepicker modal. not the datepimepicker. The timepicker is only customized using the outline button. but I am confused how to place the outline button next to the datepicker
我的脚本是这样的:
<template>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-dialog
ref="dialog"
v-model="modal"
:return-value.sync="date"
persistent
width="290px"
>
<template v-slot:activator="{ on }">
<v-btn color="success" dark v-on="on">Call datepicker</v-btn>
</template>
<v-date-picker v-model="date" scrollable>
<div class="flex-grow-1"></div>
<v-btn text color="primary" @click="modal = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.dialog.save(date)">OK</v-btn>
</v-date-picker>
</v-dialog>
</v-col>
</v-row>
</template>
<script>
export default {
data: () => ({
modal: false,
}),
}
</script>
是否可以自定义日期选择器?
Is it possible to customize the datepicker to be like that?
推荐答案
Datepicker不属于Vuetify。您拍摄的屏幕截图实际上是 https:的< iframe>
。 //calendly.com/ 网站,它看起来像一个用于管理约会的网站。因此,日历基本上只是该公司制作的自定义CSS,与Vuetify无关。
That Datepicker is not part of Vuetify. That screenshot you took is in fact an <iframe>
of the https://calendly.com/ website, which looks like a website for managing appointments. So that calendar is basically just custom CSS made by that company, nothing to do with Vuetify.
这篇关于如何在vuetify中自定义日期选择器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!