如何使用角度js搜索过滤器从日期到日期解决日期范围？

Question

我使用PHP，AngularJS使用此代码。我希望能够使用值填充“From”datepicker字段，并使用“To”datepicker字段填充值，并仅获取此范围内的记录。如何解决这个问题？

<div ng-controller="customersCrtl" ng-app="myApp3" ng-app lang="en">
  <div class="loading-dialog" ng-show="imLoading"></div>
    <div class="content"  ng-cloak>
     <div class="row">
        <div class="col-md-2">PageSize:
            <select ng-model="entryLimit" class="form-control">
                <option>5</option>
                <option>10</option>
                <option>20</option>
                <option>50</option>
                <option>100</option>
            </select>
        </div>
        <div class="col-md-3">Filter:
            <input type="text" ng-model="search2" ng-change="filter()" placeholder="Filter" class="form-control" />
        </div>




        <div class="col-md-3">
        <input id="datefrom" ng-model="dt1" placeholder="Date From" class="form-control admitdate" type="text">
        </div>

        <div class="col-md-3">
        <input id="dateto" ng-model="dt2" placeholder="Date To" class="form-control admitdate" type="text">
        </div>

        <div class="col-md-4">
            <h5>Filtered {{ filtered.length }} Of {{ totalItems}} Total Details</h5>
        </div>
    </div>
    <br/>
    <div class="row">
        <div class="col-md-12" ng-show="filteredItems > 0">
            <table class="table table-striped table-bordered">
            <thead>
            <th>Id&nbsp;<a ng-click="sort_by('id');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>ME&nbsp;<a ng-click="sort_by('me_fullname');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Doctor&nbsp;<a ng-click="sort_by('doc_fullname');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Remarks&nbsp;<a ng-click="sort_by('remarks');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Meeting Date&nbsp;<a ng-click="sort_by('meeting_date');"><i class="glyphicon glyphicon-sort"></i></a></th>
            <th>Created On&nbsp;<a ng-click="sort_by('created_timestamp');"><i class="glyphicon glyphicon-sort"></i></a></th>    
            </thead>
            <tbody>
                <tr ng-repeat="data in filtered = (list | filter:search | filter:search2 | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit  | dateRangeFilter:dt1:dt2">
                   <td>{{$index+1}}</td>
                    <td>{{data.me_fullname}}</td>
                    <td>{{data.doc_fullname}}</td>
                    <td>{{data.remarks}}</td>
                    <td>{{data.meeting_date}}</td>
                    <td>{{data.created_timestamp}}</td> 
                </tr>
            </tbody>
            </table>
        </div>
        <div class="col-md-12" ng-show="filteredItems == 0">
            <div class="col-md-12">
                <h4>No Details found</h4>
            </div>
        </div>
        <div class="col-md-12" ng-show="filteredItems > 0">    
            <div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>
        </div>
    </div>
</div>
</div>

脚本：

<script src="<?php echo Yii::app()->baseUrl; ?>/angular/js/angular.min.js"></script>
<script src="<?php echo Yii::app()->baseUrl; ?>/angular/js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script>
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('<?php echo Yii::app()->baseUrl; ?>/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);
  };    


});
</script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript">
$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();
    });
});
</script>