CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatangular-material
pryxen
pryxen

Reputation: 413

filter ng-repeat using md-datepicker

I have to filter my ng-repeat items using the uploadDate but it fails to filter. I tried everything but it always fails. I hope someone can help me.

Controller

ExtractionService.getUserUploadedData(d).then(function (msg) {
   angular.forEach(msg.data, function (val) {
          var src = val.uploadDate;
          src = src.replace(/[^0-9 +]/g, '');
          var uploadDate = new Date(parseInt(src));
          console.log(uploadDate); //it returns a ISO date string format
          var dd = {
              uploadDate: uploadDate,
              filename: val.filename,
              bch: val.bch,
              Id: val.edmId
          }
          $scope.datalistings.push(dd);
    })             
});

HTML

<md-datepicker ng-model="search.uploadDate" ng-change="search.uploadDate = (search.uploadDate.toISOString())" md-placeholder="Enter Date" md-open-on-focus></md-datepicker>

In above code i tried to convert search.uploadDate model to ISO string date format using .toISOString() but it fail to filter the result in ng-repeat

<tr ng-repeat="info in filtereddata = (datalistings | filter: {uploadDate:search.uploadDate})" class="animate-repeat">
      <td>{{$index+1}}</td>
      <td>{{info.uploadDate}}</td>
      <td>{{info.filename}}</td>
      <td>{{info.bch}}</td>
</tr>

I also tried to convert the info.uploadDate just like this {{info.uploadDate.toISOString()}} but it also fails :( Can anyone help me?

Upvotes: 1

Views: 59

Answers (1)

Rakesh Chand
Rakesh Chand

Reputation: 3113

Create a custom DateFilter like below

.filter('DateFilter', function() {
    return function(dataArray, uploadDate) {
        if (!dataArray) {
            return;
        } else if (!uploadDate) {
            return dataArray;
        } else {
            return dataArray.filter(function(item) {
                var uploadDateInput = new Date(item.uploadDate);
                if (uploadDate !== null) {
                    var term = (uploadDateInput.getDate() === uploadDate.getDate() && uploadDateInput.getMonth() === uploadDate.getMonth() && uploadDateInput.getYear() === uploadDate.getYear());
                    return term;
                }
            });
        } 
    };
});

Use it in ng-repeat as | DateFilter : yourinputdate

Upvotes: 1

Related Questions