vuetify datepicker clear dates and re render component

Question

I have a datepicker in vuetify js that im looking to clear the dates and refresh the component.

I have a v-data table that is filtered based on the dates range array, I want to be able to either add a v-btn clear in the datepicker to do this or have a clear X btn on the text field.

data(){
    return
    { 
      date:['',''],
      menu:false,
     }

   }


  <v-menu
    ref="menu"
    v-model="menu"
    :close-on-content-click="false"
    :return-value.sync="dates"
    transition="scale-transition"
    offset-y
    min-width="290px"
  >
    <template v-slot:activator="{ on }">

      <v-text-field
        v-if="selectedTask"
        label="Select Start Date Range"
        readonly
        v-on="on"
        v-model="dates"
      ></v-text-field>


    </template>

     <v-date-picker v-model="dates" range>
        <v-spacer></v-spacer>
      <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
      <v-btn text color="primary" @click="$refs.menu.save(dates)">OK</v-btn>
     </v-date-picker>


  </v-menu>

Answer 1

您可以在日期选择器中有一个清除按钮，如下所示

<v-date-picker v-model="dates" range>
  <v-btn 
    text color="primary" @click="menu = false">Cancel
  </v-btn>
  <v-btn 
    text color="primary" @click="$refs.menu.save(dates)">OK
  </v-btn>
  <v-spacer></v-spacer>
  <v-btn 
    text color="primary" @click="$refs.menu.save([])">Clear
  </v-btn>
</v-date-picker>

您也可以制作文本字段clearable，它会附加一个清晰的图标

<v-text-field
  v-if="selectedTask"
  label="Select Start Date Range"
  readonly
  v-on="on"
  v-model="dates"
  clearable
>
</v-text-field>