Date Range filter using Angular Smart Table

Question

I'm trying to apply a date range filter on Angular Smart Table (http://lorenzofox3.github.io/smart-table-website/), however, I haven't been able to do that. The only example I see online points to : http://plnkr.co/edit/Idbc1JNHKylHuX6mNwZ6?p=preview which is broken as well.

This is my 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>

This is the template.html file content for st-date-range directive:

<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"/>

And this is the directive:

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

                        }
                    }

                }
        );
    }
};

});

I've also tried using $filter to filter out the records in releaseList using comparator function but then the Smart Table pagination breaks.

I really need some quick help here. Thank you very much!

but is really broken with the latest angularjs/angular-ui-bootstrap — serge, Aug 02 '17 at 13:50

score 3 · Answer 1 · answered Jul 02 '15 at 20:37

Posting my solution in case anybody finds it useful:

I needed to create a custom filter as below and then use it in the view template as : 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;
            };
        }]);

Date Range filter using Angular Smart Table

1 Answers1