根据使用 Alpine.js 选择的日期范围进行过滤

Question

我正在尝试筛选在所选 fromDate 和 toDate 期间活跃的董事 $inactiveDirectors。董事将从生效日期 (director.effective_date) 到 resigned/removed 日期 (director.release_date) 有效。如果用户没有选择 toDate，它将被假定为当前日期。

函数：

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

            });
        }
    }
}

我一直在尝试使用 Alpine.js 进行过滤，但没有成功。如果您能找到解决此问题的方法，我们将不胜感激。

UI：

谢谢

Answer 1

我解决了。供您参考：

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;
                    }
                });
            }
        }
    }

根据使用 Alpine.js 选择的日期范围进行过滤

Filter based on date range picked using Alpine.js

javascript

json

date

laravel

alpine.js