javascript - Date Range filter using Angular Smart Table -

i'm trying apply date range filter on angular smart table (http://lorenzofox3.github.io/smart-table-website/), however, haven't been able that. example see online points : http://plnkr.co/edit/idbc1jnhkylhux6mnwz6?p=preview broken well.

this 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 template.html file content 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 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 tried using $filter filter out records in releaselist using comparator function smart table pagination breaks.

i need quick here. thank much!

posting solution in case finds useful:

i needed create custom filter below , use in view template : 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;             };         }]);