Date range filter using Angular smart table

Question

I am trying to apply a date range filter on an Angular smart table ( http://lorenzofox3.imtqy.com/smart-table-website/ ), however I do not know, I managed to do this. The only example I see in online items is: http://plnkr.co/edit/Idbc1JNHKylHuX6mNwZ6?p=preview , which is also broken.

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 contents of the template.html file for the 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 also tried using $ filter to filter out the entries in the releaseList using the comparator function, but then paginated.

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

Answer 1

Posting my solution in case anyone finds it useful:

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