h1_Keeda h1_Keeda - 3 months ago 12
AngularJS Question

How can we search on ranges between start Date to End Date using angular?

I am able to search in the Application number criteria using filter but i am not getting search in the ranges of start date to end date.

<div class="col-md-10">
<label for="Form_Number__c" id="Form_Number__c" class="col-sm-2 control-label right">Application No
</label>
<div class="col-sm-2">
<input type="text" class="form-control dateField" id="Form_Number__c" name="Form_Number__c" ng-model="list.Form_Number_c" placeholder="Enter Application No">
</div>
<label for="From_Date" id="From_Date" class="col-sm-2 control-label right">From Date</label>
<div class="col-sm-2">
<input type="date" ng-model="list.From_Date" class="form-control dateField" id="From_Date" name="From_Date" placeholder="From Date">
</div>
<label for="To_Date" id="To_Date" class="col-sm-2 control-label right">To Date</label>
<div class="col-sm-2">
<input type="date" ng-model="list.To_Date" class="form-control dateField" id="To_Date" name="To_Date" placeholder="To date">
</div>
</div>



<tr dir-paginate="list in list_home|filter:list|itemsPerPage:10 |orderBy:'Created_Date':false">
<td><span ng-bind="list.Form_Number_c"/></td>
<td><a href="" ng-click="setAppIdByView(list.Form_Number_c)"><span ng-bind="list.Subject"/></a></td>
<td><span ng-bind="list.Created_Date"/></td>
<td class="text-success"><span ng-bind="list.App_Status"/></td>

</tr>

Answer
  • In order to find range we have to deal with filter. Go through below dummy example.

var nameSpace = angular.module('tst',[]);

nameSpace.controller('MyController', function MyController($scope) {
  $scope.orders = [
  {
    "date1":"1306487800",
    "date2":"1406587800"
  },
  {
    "date1":"1196487800",
    "date2":"1406597800"
  }]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="tst"> 
<div ng-controller="MyController"> 
    <table>
                <tr>
                    <td>From:<input  ng-model="query.date1"  type="text" placeholder="" /></td>
                        <td>To:<input  ng-model="query.date2"  type="text" placeholder="" /></td>
                </tr>

                <tr ng-repeat="order in orders |filter:query">
                    <td>{{order.date1 * 1000 | date:'dd-MM-yyyy'}}</td>
                    <td>{{order.date2 * 1000 | date:'dd-MM-yyyy'}}</td>
                </tr>
    </table>
</div>
</div>

This will help you find to search