单击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 &lt;template v-slot:activator=" on "&gt;

【讨论】:

【参考方案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中的按钮时如何显示日期选择器?的主要内容,如果未能解决你的问题,请参考以下文章

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

如何在按钮单击时显示日期选择器?

Datepicker:单击按钮时如何弹出日期选择器并将值存储在变量中[关闭]

如何在按钮单击并插入跨度标记时显示 jquery datepicker

单击按钮时如何显示颜色选择器?

如何使用引导模式更新引导日期时间选择器中的默认日期