AngularJS ngTable filtering by date

Question

I am trying to configure ngTable in my application, but it does not support filtering by date, and I cannot figure out how to implement it. Initially, I had a date in my data as a timestamp, which allowed me to sort the column correctly due to the incremental nature of the timestamp, but obviously I cannot print September and filter the data.

// Example row data from data array { "index": 0, "id": "54587313ac91d561b246bf90", "user": "user3", "date": 1390054873445, "status": "in-progress" } 

I tried setting it to a string, but when you filter or sort, it does not create asc / desc order, instead it comes to be organized in the data.

 // Date output not in asc/desc if use date string September 8, 2014 September 27, 2014 September 23, 2014 September 26, 2014 

I look through ngTable and find that I can change the table title, so I took a copy for editing and added some kind of custom filter or directive? Maybe I should use a different date string? I created a Plunker application using timestamp data that is filtered out for display to the user and sorted, but I would like to be able to filter by entering the month, day and / or year, i.e. 2014, September, etc.

 // Example date column setup <td data-title="'Date'" sortable="'date'" filter="{ 'date': 'text' }" ng-bind="(doc.date | date:mediumDate)"></td> 

UPDATE I just noticed at the bottom of ngTable.js that you can use your own filters. I eventually figured out how to load an external file into a custom filter, rather than embed ngTemplates:

 <td data-title="'Date'" sortable="'date'" filter="{ 'date': 'date' }" // add name of filter (date), to the value of assoc array ng-bind="(loan.date | date:mediumDate)"></td> 

or put the file in a more useful place in your application:

 <td data-title="'Date'" sortable="'date'" filter="{ 'date': 'date', templateURL: '/www/app/ng-table/filters/date.html' }" ng-bind="(loan.date | date:mediumDate)"></td> 

Still not sure what to do, but trying to get it to work, I made Plunker what I have, if that helps. Should there be a directive in date.html?

Answer 1

You can do this by specifying a custom filter as follows:

 angular.module("tableApp", ['ngTable']) .filter('customUserDateFilter', function($filter) { return function(values, dateString) { var filtered = []; if(typeof values != 'undefined' && typeof dateString != 'undefined') { angular.forEach(values, function(value) { if($filter('date')(value.Date).indexOf(dateString) >= 0) { filtered.push(value); } }); } return filtered; } }) .controller("MyCtrl", function($scope, $filter, ngTableParams) { var data = [ { Name: 'John', Date: new Date('1/1/2014') }, { Name: 'Doe', Date: new Date('1/2/2014') }, { Name: 'Jane', Date: new Date('2/1/2014') } ]; $scope.tableParams = new ngTableParams({ page: 1, // show first page count: 10, // count per page }, { total: data.length, // length of data getData: function($defer, params) { // use build-in angular filter var filters = params.filter(); var tempDateFilter; var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; if(filters) { if(filters.Date) { orderedData = $filter('customUserDateFilter')(orderedData, filters.Date); tempDateFilter = filters.Date; delete filters.Date; } orderedData = $filter('filter')(orderedData, filters); filters.Date = tempDateFilter; } $scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()); params.total(orderedData.length); // set total for recalc pagination $defer.resolve($scope.users); } }); }) 

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="//cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.css" /> <div ng-app="tableApp" ng-controller="MyCtrl"> <table ng-table="tableParams" show-filter="true" class="table"> <tr ng-repeat="user in $data"> <td data-title="'Name'" filter="{ 'Name': 'text' }" sortable="'Name'"> {{user.Name}} </td> <td data-title="'Date'" filter="{ 'Date': 'text' }" sortable="'Date'"> {{user.Date | date}} </td> </tr> </table> </div> 

Answer 2

I can do this by marking the filter date as text . Sort functionality also works. The following is a working example:

 angular.module("tableApp", ['ngTable']) .controller("MyCtrl", function($scope, NgTableParams) { $scope.data = [ { Name: 'John', Date: new Date('2/1/2019') }, { Name: 'Doe', Date: new Date('1/2/2014') }, { Name: 'Jane', Date: new Date('1/1/2014') }, { Name: 'Karthik', Date: new Date('3/1/2017') } ]; $scope.tableParams = new NgTableParams({}, {dataset:$scope.data}); }) 

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> <script src="//cdn.jsdelivr.net/angular.ngtable/1.0.0/ng-table.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/angular.ngtable/1.0.0/ng-table.css" /> <div ng-app="tableApp" ng-controller="MyCtrl"> <table ng-table="tableParams" show-filter="true" class="table"> <tr ng-repeat="user in $data"> <td data-title="'Name'" filter="{ 'Name': 'text' }" sortable="'Name'"> {{user.Name}} </td> <td data-title="'Date'" filter="{ 'Date': 'text' }" sortable="'Date'"> {{user.Date | date}} </td> </tr> </table> </div>