0
309
VistasFiltrar según el rango de fechas elegido con Alpine.js
Estoy tratando de filtrar los directores $inactiveDirectors que estuvieron activos durante el fromDate seleccionado y el toDate . Los directores estarán activos desde su fecha de entrada en vigencia ( director.effective_date ) hasta su fecha de renuncia/remoción ( director.release_date ). Y si el usuario no eligió una toDate , se asumirá que es la fecha actual.
La función:
function loadDirectors() { return { fromDate: "" , toDate: "" , fromDateObj: null , toDateObj: null , directorsList: @json($inactiveDirectors) , get filteredDirectors() { if (this.fromDate === "") { return this.directorsList; } this.fromDateObj = new Date(this.fromDate); if (this.toDate === "") { this.toDateObj = null; } else { this.toDateObj = new Date(this.toDate); } return this.directorsList.filter((director) => { let effective_date_obj = new Date(director.effective_date); let release_date = new Date(director.release_date); if (this.fromDateObj.getTime() < effective_date_obj.getTime()) { if (this.toDateObj) { if (this.toDateObj.getTime() > release_date.getTime()) { return director; } else { return director; } } } }); } } }He estado tratando de filtrar usando Alpine.js sin suerte todavía. Agradecería si pudiera encontrar una manera de resolver esto.
La interfaz de usuario: 
Gracias
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Lo resolví. Para tu referencia:
function loadDirectors() { return { fromDate: "" , toDate: "" , fromDateObj: null , toDateObj: null , directorsList: @json($inactiveDirectors) , get filteredDirectors() { if (this.fromDate === "" && this.toDate === "") { return this.directorsList; } // if toDate not selected if (this.toDate === "") { this.toDateObj = null; } else { this.toDateObj = new Date(this.toDate); } // if fromDate not selected if (this.fromDate === "") { this.fromDateObj = null; } else { this.fromDateObj = new Date(this.fromDate); } return this.directorsList.filter((director) => { // director effective date object let effectiveDate = director.effective_date; const eArray = effectiveDate.split("/"); let effectiveDay = eArray[0]; let effectiveMonth = eArray[1]; let effectiveYear = eArray[2]; const effective_date = effectiveMonth + '/' + effectiveDay + '/' + effectiveYear; let effectiveDateObj = new Date(effective_date); // director release date object let releaseDate = director.release_date; const rArray = releaseDate.split("/"); let releaseDay = rArray[0]; let releaseMonth = rArray[1]; let releaseYear = rArray[2]; const release_date = releaseMonth + '/' + releaseDay + '/' + releaseYear; let releaseDateObj = new Date(release_date); let shouldReturn = true; if (this.fromDateObj && this.fromDateObj > effectiveDateObj) { shouldReturn = false; } if (this.toDateObj) { if (this.fromDateObj) { if (releaseDateObj < this.fromDateObj || releaseDateObj > this.toDateObj) shouldReturn = false; } } if (shouldReturn) { return director; } }); } } }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta