title: How to do solve date range using angular js search filter from date, to date?
body: <p>I am using this code using PHP, AngularJS. I want to be able to fill the "From" datepicker field with the value and the "To" datepicker field the value and get only the records that are in this range. How to do solve this issue?</p>
  
  <pre><code>&lt;div ng-controller="customersCrtl" ng-app="myApp3" ng-app lang="en"&gt;
    &lt;div class="loading-dialog" ng-show="imLoading"&gt;&lt;/div&gt;
      &lt;div class="content"  ng-cloak&gt;
       &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;PageSize:
              &lt;select ng-model="entryLimit" class="form-control"&gt;
                  &lt;option&gt;5&lt;/option&gt;
                  &lt;option&gt;10&lt;/option&gt;
                  &lt;option&gt;20&lt;/option&gt;
                  &lt;option&gt;50&lt;/option&gt;
                  &lt;option&gt;100&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;Filter:
              &lt;input type="text" ng-model="search2" ng-change="filter()" placeholder="Filter" class="form-control" /&gt;
          &lt;/div&gt;
  
  
  
  
          &lt;div class="col-md-3"&gt;
          &lt;input id="datefrom" ng-model="dt1" placeholder="Date From" class="form-control admitdate" type="text"&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-3"&gt;
          &lt;input id="dateto" ng-model="dt2" placeholder="Date To" class="form-control admitdate" type="text"&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-4"&gt;
              &lt;h5&gt;Filtered {{ filtered.length }} Of {{ totalItems}} Total Details&lt;/h5&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br/&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12" ng-show="filteredItems &gt; 0"&gt;
              &lt;table class="table table-striped table-bordered"&gt;
              &lt;thead&gt;
              &lt;th&gt;Id&amp;nbsp;&lt;a ng-click="sort_by('id');"&gt;&lt;i class="glyphicon glyphicon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
              &lt;th&gt;ME&amp;nbsp;&lt;a ng-click="sort_by('me_fullname');"&gt;&lt;i class="glyphicon glyphicon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
              &lt;th&gt;Doctor&amp;nbsp;&lt;a ng-click="sort_by('doc_fullname');"&gt;&lt;i class="glyphicon glyphicon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
              &lt;th&gt;Remarks&amp;nbsp;&lt;a ng-click="sort_by('remarks');"&gt;&lt;i class="glyphicon glyphicon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
              &lt;th&gt;Meeting Date&amp;nbsp;&lt;a ng-click="sort_by('meeting_date');"&gt;&lt;i class="glyphicon glyphicon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
              &lt;th&gt;Created On&amp;nbsp;&lt;a ng-click="sort_by('created_timestamp');"&gt;&lt;i class="glyphicon glyphicon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;    
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr ng-repeat="data in filtered = (list | filter:search | filter:search2 | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit  | dateRangeFilter:dt1:dt2"&gt;
                     &lt;td&gt;{{$index+1}}&lt;/td&gt;
                      &lt;td&gt;{{data.me_fullname}}&lt;/td&gt;
                      &lt;td&gt;{{data.doc_fullname}}&lt;/td&gt;
                      &lt;td&gt;{{data.remarks}}&lt;/td&gt;
                      &lt;td&gt;{{data.meeting_date}}&lt;/td&gt;
                      &lt;td&gt;{{data.created_timestamp}}&lt;/td&gt; 
                  &lt;/tr&gt;
              &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="col-md-12" ng-show="filteredItems == 0"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;h4&gt;No Details found&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-12" ng-show="filteredItems &gt; 0"&gt;    
              &lt;div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&amp;laquo;" next-text="&amp;raquo;"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>&lt;script src="&lt;?php echo Yii::app()-&gt;baseUrl; ?&gt;/angular/js/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="&lt;?php echo Yii::app()-&gt;baseUrl; ?&gt;/angular/js/ui-bootstrap-tpls-0.10.0.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var app = angular.module('myApp3', ['ui.bootstrap']);
  
  app.filter('startFrom', function() {
  
      return function(input, start) {
          if(input) {
              start = +start; //parse to int
              return input.slice(start);
          }
          return [];
      }
  });
  
  app.controller('customersCrtl', function ($scope, $http, $timeout) {
                                           $scope.imLoading = true;
      $http.get('&lt;?php echo Yii::app()-&gt;baseUrl; ?&gt;/index.php/admin/default/me_met_doctors/type/list').success(function(data){
  
  
          $scope.list = data;
          $scope.currentPage = 1; //current page
          $scope.entryLimit = 20; //max no of items to display in a page
          $scope.filteredItems = $scope.list.length; //Initially for no filter  
          $scope.totalItems = $scope.list.length;
           $scope.imLoading = false; 
      });
      $scope.setPage = function(pageNo) {
          $scope.currentPage = pageNo;
      };
      $scope.filter = function() {
          $timeout(function() { 
              $scope.filteredItems = $scope.filtered.length;
          }, 10);
      };
      $scope.sort_by = function(predicate) {
          $scope.predicate = predicate;
          $scope.reverse = !$scope.reverse;
      }; 
  
      $scope.changedValue = function(item,newitem){      
      managespecializations(item,newitem);
    };    
  
    $scope.deleteValue = function(item,newitem){  
    //alert(newitem);    
      deletespecializations(item,newitem);
    };    
  
  
  });
  &lt;/script&gt;
  
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $j=jQuery.noConflict();
  $j(function() {
      $j('.admitdate').live('click', function() {
          $j(this).datepicker('destroy').datepicker({changeMonth: true,changeYear: true,dateFormat: "yy-mm-dd",yearRange: "1900:+10",showOn:'focus'}).focus();
      });
  });
  &lt;/script&gt;
  </code></pre>