How to sort data in between two date using Angular.js?

Question

I need to filter table data selecting two dates using Angular.js. My code below:

 <div class="col-md-3">
<div class="input-group datepicker" date-format="yyyy-MM-dd" button-prev='<i class="fa fa-arrow-circle-left"></i>' button-next='<i class="fa fa-arrow-circle-right"></i>'> 
<input type="text" name="birthdate" class="form-control" id="date" ng-model="date" placeholder="From date" />
 <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
 </div>
 </div>
<div class="col-md-3">
    <div class=" input-group datepicker" date-format="yyyy-MM-dd" button-prev='<i class="fa fa-arrow-circle-left"></i>' button-next='<i class="fa fa-arrow-circle-right"></i>'> 
     <input type="text" name="birthdate" class="form-control" id="date" ng-model="date1" placeholder="To date" />
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>
 </div>
<tbody id="detailsstockid">
 <tr ng-repeat="d in clickDetail">
 <td>{{$index+1}}</td>
 <td>{{d.rest_name}}</td>
 <td>{{d.Android}}</td>
 <td>{{d.IOS}}</td>
 <td>{{d.resultant_counter}}</td>
 <td>{{d.date}}</td>
</tr>   
</tbody>

Here I have two datepicker fields. When user will select From date and To date the record will filter data in between these two date including these dates also. Here I have also d.date which contains value like this 2016-05-21 15:15:44 from DB. As per this value I need to sort the table data.

No,I need to order those in between two dates(`from date and To date`). — satya, May 30 '16 at 12:04
Let me to explain again.Suppose table has many data including date time.If user is selecting two date `from date and to date`,The table data in between those two date will filter and display. — satya, May 30 '16 at 12:12
Ok, so you do need to filter the data between the two dates then? - have updated question. — James P, May 30 '16 at 12:14
@JamesP : i need within two selected date the table data should accordingly. — satya, May 30 '16 at 12:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/113330/discussion-between-satya-and-james-p). — satya, May 30 '16 at 12:27
Look at this answer @satya http://stackoverflow.com/a/25521779/337128 — Thalaivar, May 30 '16 at 12:35
@Thalaivar : i have already checked this link.Actually i am getting date with time inside the table.So it is little bit to execute.Can you edit your answer here. — satya, May 30 '16 at 12:45

iyerrama29 · Answer 1 · 2016-05-30T13:13:25.033

To my understanding you need a way to filter out dates between 'from date' and 'to date' and the dates that get filtered out are sorted in ascending order, so this might interest you I guess
(Also I added input fields since I didn't want to create individual objects)

var app = angular.module('MyApp', []);

app.controller('MainCtrl', ['$scope', function($scope){
  $scope.obj = {};
  $scope.arr = [];
  $scope.filterdObj = [];
  $scope.obj.pushEntry = function(){
    $scope.arr.push({
      'date': $scope.inDate,
      'android': $scope.inAnd,
      'ios': $scope.inIOS
      });
    console.log('$scope.arr: ', $scope.arr);
    }
  
  $scope.obj.check = function(){
    console.log('called me', $scope.fromDate);
    var d1 = new Date($scope.fromDate);
    var d2 = new Date($scope.toDate);
    if(d1.getTime() > d2.getTime())
       console.log('error');
    else{
      for(i in $scope.arr){
        var cmp = new Date($scope.arr[i].date);
        if(d1.getTime() <= cmp.getTime() && d2.getTime() >= cmp.getTime()){
          console.log('Val in between');
          $scope.filterdObj.push($scope.arr[i])
         }
       }
     }
   }
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="MyApp" ng-controller="MainCtrl">
  <div id='one'>
    <input type='date' id='date1' ng-model="inDate" />
    <input type='text' id='android' ng-model="inAnd" />
    <input type='text' id='ios' ng-model="inIOS" />
    <input type='button' value="enter" ng-click='obj.pushEntry()' />
  </div>
  <br><hr>
  <div id='two'>
    <input type='date' ng-model='fromDate' />
    <input type='date' ng-model='toDate' />
    <input type='button' value='set' ng-click='obj.check()'/>
  </div>
  <br><hr>
  <div id='disp'>
    <table class='table'>
      <tr>
        <th>Date</th>
        <th>Android</th>
        <th>IOS</th>
      </tr>
      <tr ng-repeat="obj in filterdObj | orderBy: 'date'">
        <td>{{obj.date}}</td>
        <td>{{obj.android}}</td>
        <td>{{obj.ios}}</td>
      <tr>
    </table>
  </div>
</body>

No,I think its too complecated.I have already data inside table.When user will select two date accordingly the data will fillter and display. — satya, May 30 '16 at 13:08
@satyra what is to complicated? The way how iyerrama25 adds new elements to table? — Krzysztof Safjanowski, May 30 '16 at 13:12

Krzysztof Safjanowski · Answer 2 · 2016-06-27T08:41:28.123

Some proof of concept and with AngularJS power and finding closest midnight for proper date calculations

angular.module('app', [])
  .controller('ctrl', function($filter) {
    var events = [{
      date: Date.now(),
      desc: 'first'
    }, {
      date: Date.now() - 24 * 3600 * 1000 * 7, // 7 days ago
      desc: 'third'
    }, {
      date: Date.now() - 24 * 3600 * 1000 * 2, // 2 days ago
      desc: 'second'
    }]

    this.date = null
    this.getFilteredEvents = function(from, to) {
      if (!(from && to) && angular.isDate(from) && angular.isDate(to)) {
        return events
      }

      function getMidnight(date) {
        return (new Date(new Date(date).getFullYear(), new Date(date).getMonth(), new Date(date).getDate()))
      }

      return events.filter(function(event) {
        return getMidnight(event.date + 24 * 3600 * 1000).getTime() >= (new Date(from)).getTime() && getMidnight(event.date).getTime() <= (new Date(to)).getTime()
      })
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app'>
  <div ng-controller='ctrl as c'>
    <label for="from">from</label>
    <input type="date" id="from" ng-model="c.date.from" />
    <label for="to">to</label>
    <input type="date" id='to' ng-model="c.date.to" />
    <ul>
      <li ng-repeat="event in c.getFilteredEvents(c.date.from, c.date.to) | orderBy:'-date'">
        <dl>
          <dt>{{ event.desc }}</dt>
          <dd>{{ event.date | date }}</dd>
        </dl>
      </li>
    </ul>
  </div>
</div>

means suppose i selected in between 23,May to 28,May.It is filtering only `May 23, 2016` not `May 28, 2016` data. — satya, May 30 '16 at 13:47

How to sort data in between two date using Angular.js?

2 Answers2