Search code examples
htmlcssangularjsmeanjs

Angularjs Filtering the Field Based on Start Date and End Date?


Hi all I want to filtering the items like (Start and End Date) which is based on Due_date using the daterange functionality in meanjs app. then I tried many ways but unable to get the solution if any one knows the solution please help me..... My Plunk

  • Please look at my plunker to reference.

  • I Have displaying Due_date, so this is the field I want to use for filtering.

  • I have used some functionality to add invoice_Date and terms, which provides the answer like Due_date. for exmple:- invoice_date : 2016-09-10, terms : 6, the answer I got Due_date : 16-09-2016

  • so what I excatly looking for , I want to filter the Due_date as start date and end date : for example:- if we select start date like 16-09-2016 and end date is 25-09-2016 in table these two transaction only need to display or filter... so I have used daterange filter to achieve this solution, but unable to get the solution please help us.

  • the daterange filter is working perfectly if we using ng_module is invoice_date, but we don't know how to filter the Due_date filed please help us.... My Plunker

Controller:

.filter('dateRange', function() {
     return function(records, dateKey, from, to) {
       return records.filter(function(record) {
         return !moment(record[dateKey], 'YYYY-MM-DD').isBefore(moment(from))
                && !moment(record[dateKey], 'YYYY-MM-DD').isAfter(moment(to));
            });
        }
    })

Html:

<input type="date" class="form-control" name="from" ng-model="from">

<input type="date" class="form-control" name="to" ng-model="to">

Filter:-

ng-repeat="data in  record | dateRange : 'invoice_date' : from : to"

This below the filed need to filter in table:-

Due_date:-

<td> {{addDays(data.invoice_date,data.terms) | date:'dd-MM-yyyy'}}</td>
  • I have created plunker for referrence:- My plunker

Solution

  • You can create a custom filter for this

    HTML

     <tr ng-repeat="data in  record | myfilter:from:to">
       <td> {{data.supplier_name}}</td>
       <td> {{data.invoice_date}}</td>
       <td> {{data.terms}}</td>
       <td> {{addDays(data.invoice_date,data.terms) | date:'yyyy-MM-dd'}}</td>
    </tr>
    

    JS

     app.filter("myfilter", function() {
          return function(items, from, to) {
                var df = from;
                var dt =to;
                var result = [];   
    
                for (var i=0; i<items.length; i++){
                    var date = new Date(items[i].invoice_date);
                    date.setDate(date.getDate() + parseInt(items[i].terms));
                    var tf = date;
                    if (tf > df && tf < dt)  {
                        result.push(items[i]);
                    }
                }   
                return result;
          };
        });