我如何在vuetify中自定义日期选择器？

Question

我想这样设置datetimepicker：https://vuetifyjs.com/en/getting-started/consulting-and-support。如果单击“ 2小时咨询会议”，它将显示日期时间选择器，如下所示：https://ibb.co/kHrbHTG。我想那样做。但是我在文档中找不到组件datetimepicker。的文档：https://vuetifyjs.com/en/components/date-pickers

根据我的分析，它使用日期选择器模式。不是datepimepicker。仅使用轮廓按钮自定义时间选择器。但是我很困惑如何在“日期选择器”旁边放置大纲按钮

我的脚本是这样的：

<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>

是否可以将日期选择器自定义为这样？

Answer 1

该Datepicker不属于Vuetify。您所截取的屏幕截图实际上是<iframe>网站的https://calendly.com/，它看起来像是用于管理约会的网站。因此，日历基本上只是该公司制作的自定义CSS，与Vuetify无关。