title: AngularJS filter and display range of dates using ng-repeat
body: <p>new to AngularJS- or the whole web development scene,</p>
  
  <p>I am not even sure if this is possible or I am taking the most efficient path but I'm currently in need of a way to filter the range of dates using two input boxes, I'm using a jquery datepicker to always format the date to be "YYYY-MM-DD".</p>
  
  <p>So, I have the following two input boxes, </p>
  
  <pre><code>&lt;label class="" for="DateFromFilter"&gt;
            Date From:
  &lt;/label&gt;
   &lt;input date-picker type="text" id="DateFromFilter" 
      class="form-control" 
      title="Please enter in YYYY-MM-DD format."
      ng-model="search.dueDate" /&gt;
  
   &lt;label class="" for="DateToFilter"&gt;
             Date To:
   &lt;/label&gt;
    &lt;input date-picker type="text" id="DateToFilter" 
       class="form-control"
       title="Please enter in YYYY-MM-DD format."
       ng-model="search.toDate" /&gt;
  </code></pre>
  
  <p>And of course I have a table with a ng-repeat directive, getting its data from a local JSON file...only the dueDate is received.</p>
  
  <pre><code>&lt;tr&gt; ng-repeat="dateItem in dateItems | filter:search:strict | filter:dateFilter" 
  &lt;td&gt;{{dateItem.dueDate}}&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>I need a way to let's say, </p>
  
  <ul>
  <li><p>if the user selects a date on the dueDate field ONLY, the ng-repeat
  list will filter and list all the dates FROM that date and onwards.</p></li>
  <li><p>if the user selects a date on the toDate field ONLY, the ng-repeat<br>
  list will filter and list all the dates UP TO and including that<br>
  certain date.</p></li>
  <li><p>if the user selects dates on both fields, the list will display all<br>
  the dates between those two dates.</p></li>
  </ul>
  
  <p>I'm so lost on which route to take, I've been thinking I have to write a custom filter function and compare the dates with if statements and so on but I don't have a decent enough of a code to illustrate here...</p>
  
  <p>any help or guidance will be greatly appreciated! </p>
  
  <p>Thank you! </p>
  
  <p>---------------------------------------------UPDATE-------------------------------</p>
  
  <p>So I ended up trying to write a custom filter function to the best of my abilities..it does not work though....;(   It kinda works if I take out the bolded conditional statements...</p>
  
  <pre><code>$scope.dateFilter = function (item) {
  
    /*
     * When the display starts, the inputs are undefined. also need to
     * account for when the inputs are empty to return everything.
     */
  if ((!angular.isUndefined($scope.dueDate) &amp;&amp; $scope.dueDate != "" ) **&amp;&amp;
        (angular.isUndefined($scope.toDate) || $scope.toDate == "" )**)
    {          
      var inputDate = new Date($scope.dueDate);
      var incomingDate = new Date(item.dueDate);
      if (inputDate &lt;= incomingDate) 
      {
       return true;
      }
      else
      {
       return false;
      }
    }
  else if ((!angular.isUndefined($scope.toDate) &amp;&amp; $scope.toDate != "")**&amp;&amp;
            (angular.isUndefined($scope.dueDate) || $scope.dueDate == "" )**)
    {
      var inputDate = new Date($scope.toDate);
      var incomingDate = new Date(item.dueDate);
      if (inputDate &gt;= incomingDate)
      {
        return true;
      }
      else
      {
        return false;
      }
    }
  else if ((!angular.isUndefined($scope.dueDate) &amp;&amp; $scope.dueDate != "" )&amp;&amp;
            (!angular.isUndefined($scope.toDate) &amp;&amp; $scope.toDate != ""))
    {
      var inputDueDate = new Date($scope.dueDate);
      var inputToDate = new Date($scope.toDate);
      if (inputDueDate &lt; item.dueDate &amp;&amp; inputToDate &gt; item.dueDate )
      {
        return true;
      }
      else
      {
       return false;
      }
    }
  else
    {
     return true;
    }      
  };
  </code></pre>