如何隐藏 v-text-field 类型的日期图标

Question

我目前通过使用以下代码使用 v-text-field 进行日期输入

<v-text-field label="Date" type="date"></v-text-field>

这将产生一个带有日历 UI 的文本框（然后可用于更改文本框的日期）

我的问题是我不想显示日历图标并使文本字段本身可单击/可编辑。 我怎样才能做到这一点？

Answer 1

使用 Vuetify 的 <v-text-field/> + <v-date-picker/>

最好的方法是使用<v-text-field/>（默认情况下没有附加图标），点击时会显示<v-date-picker/>。这是同一件事，但有一个样式精美的日期选择器。有关 Vuetify 的日期选择器 here 的更多信息。

<v-menu v-model="menu" :close-on-content-click="false" offset-y min-width="290px">
  <template v-slot:activator="{ on, attrs }">
    <v-text-field 
      type="text"
      v-model="date"
      readonly
      v-bind="attrs"
      v-on="on"
      label="Date"
    />
  </template>
  <v-date-picker v-model="date" @input="menu = false"></v-date-picker>
</v-menu>

// script
data: () => ({
  menu: false,
  date: null
})

这是codesandbox 的演示：