Currently, I am working with a datepicker in Vuetify JS and I need to find a way to clear the dates and refresh the component.
In addition, there is a v-data table that is filtered based on the dates range array. I am exploring options to either add a 'clear' button in the datepicker or have a clear button ('X') on the text field for this purpose.
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>