filter datatable in vuetify using daepicker? - vue.js

Question

i'am new to vuetify, I am working on using a datepicker to filter a vuetify datatable [ from:date - to:date ], i couldn't solve the part of comparing the picked date to a date inside the table and make the filtering process to the data .
enter code here
<script>
export default {
data: vm => ({
date: new Date().toISOString().substr(0, 10),
dateFormatted: vm.formatDate(new Date().toISOString().substr(0, 10)),
menu1: false,
menu2: false,
search:'',
headers: [
{
text: 'Names',
align: 'left',
value: 'name'
},
{
text: 'Birth date',
value: 'birth_date'
},
],
rows: [
{
value: false,
name: 'Marcelo Tosco',
birth_date: 1538006400000,
},
{
value: false,
name: 'Carlos Campos',
birth_date: 1537401600000,
},
{
value: false,
name: 'Luis Gonzalez',
birth_date: 1536537600000,
},
{
value: false,
name: 'Keopx',
birth_date: 1536364800000,
},
{
value: false,
name: 'Marco Marocchi',
birth_date: 1535846400000,
},
]
}),
computed: {
computedDateFormatted () {
return this.formatDate(this.date)
},
},
watch: {
// eslint-disable-next-line no-unused-vars
date (val) {
this.dateFormatted = this.formatDate(this.date)
},
},
methods: {
formatDate (date) {
if (!date) return null
const [year, month, day] = date.split('-')
return `${month}/${day}/${year}`
},
parseDate (date) {
if (!date) return null
const [month, day, year] = date.split('/')
return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
},
},
}
</script>
<v-container fluid class="page-name">
<v-row>
<v-col cols="8">
<v-row class="pa-6">
<!-- Filter for dessert name-->
<v-text-field
v-model="search"
append-icon="search"
label="بحث"
single-line
hide-details>
</v-text-field>
</v-row>
</v-col>
<v-row>
<v-col cols="12" lg="6">
<v-menu
ref="menu1"
v-model="menu1"
:close-on-content-click="false"
transition="scale-transition"
offset-y
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="dateFormatted"
label="Date"
hint="MM/DD/YYYY format"
persistent-hint
prepend-icon="event"
v-bind="attrs"
#blur="date = parseDate(dateFormatted)"
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" no-title #input="menu1 = false"></v-date-picker>
</v-menu>
</v-col>
<v-col cols="12" lg="6">
<v-menu
v-model="menu2"
:close-on-content-click="false"
transition="scale-transition"
offset-y
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="computedDateFormatted"
label="Date (read only text field)"
hint="MM/DD/YYYY format"
persistent-hint
prepend-icon="event"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picke`enter code here`r v-model="date" no-title #input="menu2 = false"></v-date-picker>
</v-menu>
</v-col>
</v-row>
</v-row>
</v-container>
</template>
</v-data-table>
enter code here

Answer 1

One approach is to listen to change event in v-date-picker so in this case I created a function call filterDate in order to listen to the change
<v-date-picker
v-model="date"
#change="filterDate"
>
<v-data-table
:headers="headers"
:items="rows"
>
// In data defines a variable dates
date: undefined
// In method
filterDate() {
if (this.date !== undefined) {
this.rows = this.copyOfRows.filter((item) => item.birthday == this.date)
}
}
In my case I stored the original data that will be in v-data-table in vuex, so that when we filter items, the data is still there.
You might have to find a way to compare the date.
Hope this helps (: