Vue Date Filtre Component
new Vue({
el: '#app',
data: {
selectedType: '',
startDate:null,
endDate:null,
items: [
{
name: 'Nolan',
type: 'mercedes',
year: '2020',
country: 'england',
date: '08/01/2020'
},
{
name: 'Edgar',
type: 'bmw',
year: '2020',
country:'belgium',
date: '08/11/2020'
},
{
name: 'John',
type: 'bmw',
year: '2019',
country: 'england',
date: '08/21/2020'
},
{
name: 'Axel',
type: 'mercedes',
year: '2020',
country: 'england',
date: '08/01/2020'
}
]
},
computed: {
filterItem() {
let filterType = this.selectedType;
let startDate = this.localizeDate(this.startDate);
let endDate = this.localizeDate(this.endDate);
const itemsByType = filterType ? this.items.filter(item => item.type === filterType) : this.items
return itemsByType
.filter(item => {
const itemDate = new Date(item.date)
if (startDate && endDate) {
return startDate <= itemDate && itemDate <= endDate;
}
if (startDate && !endDate) {
return startDate <= itemDate;
}
if (!startDate && endDate) {
return itemDate <= endDate;
}
return true;
})
}
},
methods: {
localizeDate(date) {
// Date picker uses ISO format (yyyy-mm-dd), which is UTC. The data
// contains locale specific date strings (mm/dd/yyyy), which `Date`
// parses with local time-zone offset instead of UTC. Normalize the
// ISO date so we're comparing local times.
if (!date || !date.includes('-')) return date
const [yyyy, mm, dd] = date.split('-')
return new Date(`${mm}/${dd}/${yyyy}`)
},
formatDate(date) {
return new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(new Date(date))
}
}
})
Muddy Meerkat