使用Angular智能表的日期范围过滤器

Date Range filter using Angular Smart Table

本文关键字：日期范围过滤器 Angular 智能使用更新时间：2023-09-26

我试图在Angular Smart Table (http://lorenzofox3.github.io/smart-table-website/)上应用日期范围过滤器，但是，我没能做到这一点。我在网上看到的唯一一个例子是:http://plnkr.co/edit/Idbc1JNHKylHuX6mNwZ6?p=preview也坏了。

这是我的HTML:

<div st-table="releaseListDisplay" st-safe-src="releaseList">
        <div class="filter-box">
            <st-date-range></st-date-range>
        </div>
        <table class="list-page">
            <thead>
                <tr>
                    <th st-sort="releaseNum">Release#</th>
                    <th class="p15">Product Name</th>
                    <th st-sort="dateInternalRelease">Int. Release Date</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="release in releaseListDisplay">
                    <td>{{release.releaseNum}}</td>
                    <td>{{release.buildNum}}</td>
                    <td>{{release.dateInternalRelease | date:'yyyy-MM-dd'}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="9">
                        <div st-pagination="" st-items-by-page="10"></div>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>

这是st-date-range指令的template.html文件内容:

<label for="fromdate">From:</label>
<input type="date" name="fromdate" id="fromdate" 
       placeholder="MM/DD/YYYY" ng-model="fromDate"/>
<label for="todate">To:</label>
<input type="date" name="todate" id="todate" 
       placeholder="MM/DD/YYYY" ng-model="toDate"/>

这是指令:

app.directive('stDateRange', function($timeout){
return{
    restrict:'E',
    require:'^stTable',
    templateUrl:'template.html',
    scope:false,
    link: function(scope,element,attr,ctrl){
        var tableState = ctrl.tableState();
        scope.$watchGroup(["fromDate","toDate"],
                function(newValues,oldValues){
                    if(newValues){
                        var start = newValues[0];
                        var end = newValues[1];
                        if(start && end){
                            var d1 = new Date(start);
                            var d2 = new Date(end);
                            ctrl.search({after:d1.getTime(),before:d2.getTime()},'dateInternalRelease');
                        }
                    }
                }
        );
    }
};

});

我还尝试使用$filter来过滤掉使用比较器函数的releaseList中的记录，但随后智能表分页中断。

我真的需要一些快速的帮助。非常感谢!

张贴我的解决方案，以防有人发现它有用:

我需要创建一个自定义过滤器如下所示，然后在视图模板中使用它:st-set-filter="customFilter"

    app.filter('customFilter', ['$filter', function ($filter) {
            var filterFilter = $filter('filter');
            var standardComparator = function standardComparator(obj, text) {
                text = ('' + text).toLowerCase();
                return ('' + obj).toLowerCase().indexOf(text) > -1;
            };
            return function customFilter(array, expression) {
                function customComparator(actual, expected) {
                    var isBeforeActivated = expected.before;
                    var isAfterActivated = expected.after;
                    var higherLimit, lowerLimit;
                    var itemDate, queryDate;
                    if (angular.isObject(expected)) {
                        //date range
                        if (expected.before || expected.after) {
                            try {
                                if (isBeforeActivated) {
                                    higherLimit = expected.before;
                                    itemDate = new Date(actual);
                                    queryDate = new Date(higherLimit);
                                    //if (actual > higherLimit) {
                                    if (itemDate > queryDate) {
                                        return false;
                                    }
                                }
                                if (isAfterActivated) {
                                    lowerLimit = expected.after;
                                    itemDate = new Date(actual);
                                    queryDate = new Date(lowerLimit);
                                    //if (actual < lowerLimit) {
                                    if (itemDate < queryDate) {
                                        return false;
                                    }
                                }
                                return true;
                            } catch (e) {
                                return false;
                            }
                        } 
                        return true;
                    }
                    return standardComparator(actual, expected);
                }
                var output = filterFilter(array, expression, customComparator);
                return output;
            };
        }]);