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

You can have a clear button in the date picker like below

<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>

You can also make the text field clearable and it will append a clear icon

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

Answer 2

Needed to reset the whole component, including UI choices at datepicker which user has made. Did it by introducing v-if="!isReset" for v-date-picker and toggling isReset upon clearing event (which destroys and then creates the component, effectively resetting ui state).

Script - onClear method

  //* Resets data input component state
  onClear() {
    this.isReset = true
    this.$nextTick(() => {
      this.isReset = false
      //* Resetting your data to initial state, eg:
      this.$emit(this.emits.onSave, this.latestAcceptedValue)
    })
  }

Template - introduce v-if to toggle the component

  <v-date-picker v-if="!isReset" v-model="dates" range>
      <v-btn text @click="onClear">Cancel</v-btn>
  </v-date-picker>