How to hide v-text-field typed date's icon

Question

I am currently using v-text-field for date inputs by using the following code

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

and this will result to a text box with a calendar UI (which then can be used to change the date of the textbox)

my problem is I don't want to display the calendar icon and make the text field itself clickable/editable. how can I achieve this?

Answer 1

Use Vuetify's <v-text-field/> + <v-date-picker/>

The best way is to have a <v-text-field/> (which has no appended icons by default) that will show a <v-date-picker/> on click. It's the same thing, but with a beautifully styled date picker. More info about Vuetify's datepicker 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
})

Here's a demo at codesandbox: