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

Posted

技术标签:

【中文标题】如何在 vuetify 中自定义日期选择器?【英文标题】:How can I custom datepicker in the vuetify? 【发布时间】:2020-02-05 05:47:42 【问题描述】:

我想像这样制作日期时间选择器:https://vuetifyjs.com/en/getting-started/consulting-and-support。如果您单击“2 小时咨询会议”,它将显示 datetimepicker,如下所示: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
        
      >
        <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>

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

【问题讨论】:

正如我之前向您提到的:请不要在 cmets 中乞求答案。无论如何,没有人会阅读它,除非他们首先打开问题。请拨打tour 并记住我们是志愿者,没有义务帮助您。如果有人知道答案并愿意分享它,对你有好处,否则就太糟糕了。如前所述:获得75声望可以place bounties on your posts吸引更多关注,这是官方的关注方式。 【参考方案1】:

那个 Datepicker 不是 Vuetify 的一部分。你截取的那个截图实际上是https://calendly.com/ 网站的&lt;iframe&gt;,它看起来像一个管理约会的网站。所以这个日历基本上只是那家公司定制的 CSS,与 Vuetify 无关。

【讨论】:

以上是关于如何在 vuetify 中自定义日期选择器?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 vuetify 中使用多个日期选择器模式?

gridPro 中自定义日期选择器组件的值始终为空

单击vuetify中的按钮时如何显示日期选择器?

如果我在 vuetify 的日期选择器中单击下个月的图标,如何添加按钮单击以调用方法?

Vuetify 需要日期选择器并且不允许文本输入

如何在 Rails 中自定义活动管理视图?