I am working on filtering table content based on two selected dates. It do filter the date but result is not correct. dateRange Filter is written in controller.
ProductionController
angular.module('app').controller('ProductionController',
['$scope','$state','ProductionService','FarmerRepository',
function(scope,state,ProductionService,FarmerRepository) {
fetchAllUsers();
function fetchAllUsers() {
ProductionService.fetchAllUsers().then(function(d) {
produceList = d;
scope.produceList = produceList;
}, function(errResponse) {
console.error('Error while fetching produceList');
});
};
//this is custom filter
.filter('dateRange', function() {
return function(produceList, fromDate, toDate) {
if(fromDate && toDate){
var filtered = [];
angular.forEach(produceList, function(items) {
if (items.produceDate > Date.parse(fromDate) && items.produceDate < Date.parse(toDate))
filtered.push(items);
});
return filtered;
}
else
return produceList;
}})
view.html
<datepicker date-format="dd/MM/yyyy" >
<input class="form-control" name="from_date"
type="text" ng-model="from_date" required />
</datepicker>
<datepicker date-format="dd/MM/yyyy" selector="form-control">
<input class="form-control" name="to_date"
type="text" ng-model="to_date" required />
</datepicker>
<tr ng-repeat="item in produceList |dateRange:from_date:to_date|filter:search">
Edit: Order of script
<script ng-src=".js/moment.js"></script>
<script ng-src="./js/alasql.min.js"></script>
<script ng-src="./js/xlsx.core.min.js"></script>
<link ng-href="./css/page.css" rel="stylesheet" />
<link ng-href="./css/angular-datepicker.css" rel="stylesheet"
type="text/css" />
<link ng-href="./css/page.css" rel="stylesheet" />
Please check the converted dates value.produceDate when converted to number format it doesnot lie between from and to date.hence here filtering is not happening.
angular.module('app', ['720kb.datepicker']).controller('MyController', function ($scope) {
var formatStr = 'DD/MM/YYYY';
$scope.from_date = moment("2017-05-02").format(formatStr);
$scope.to_date = moment("2017-05-10").format(formatStr);
$scope.produceList = [{
"itemName": "Mango",
"produceDate": 1493360722000,
"produceId": 90
},
{
"itemName": "Banana",
"produceDate": 1493290754000,
"produceId": 89
},
{
"itemName": "Grapes",
"lastDateForBid": 1493510400000,
"produceDate": 1493099760000,
"produceId": 83
},
{
"itemName": "Apple",
"produceDate": 1490615680000,
"produceId": 66
},
{
"itemName": "Grapes",
"produceDate": 1490615515000,
"produceId": 65
}]
})
.filter('dateRange', function() {
var formatStr = 'DD/MM/YYYY';
return function(produceList, fromDate, toDate) {
if(fromDate && toDate){
var filtered = [];
angular.forEach(produceList, function(items) {
if (items.produceDate > Date.parse(moment(fromDate, formatStr)) && items.produceDate < Date.parse(moment(toDate, formatStr)))
filtered.push(items);
});
return filtered;
}
else
return produceList;
}})<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.min.css" rel="stylesheet" type="text/css" />
<div ng-app='app' ng-controller="MyController">
<div>
fromDate: <datepicker date-format="dd/MM/yyyy"><input ng-model="from_date" type="text"/></datepicker>
</div>
<div>
toDate: <datepicker date-format="dd/MM/yyyy"><input ng-model="to_date" type="text"/></datepicker>
</div>
search:
<br/>
<input type='text' ng-model='search'/>
<ul>
<li ng-repeat="item in produceList | dateRange:from_date:to_date |filter:search">
{{item | json}}
</li>
</ul>
</div>I made some modification at your .filter and used this datepicker directive:
angular.module('app', ['720kb.datepicker']).controller('MyController', function ($scope) {
$scope.from_date = '02/05/2017';
$scope.to_date = '10/05/2017';
$scope.produceList = [
{itemName:'Tom', produceDate: Date.parse(new Date(2017, 5, 9))},
{itemName:'Sam', produceDate: Date.parse(new Date(2017, 5, 10))},
{itemName:'Paul', produceDate: Date.parse(new Date(2017, 5, 11))},
{itemName:'Henry', produceDate: Date.parse(new Date(2017, 5, 12))},
]
}).filter('dateRange', function() {
var fromStr2Date = function(date){
var days = +date.substr(0, 2);
var month = +date.substr(3, 2);
var year = +date.substr(6, 4);
return new Date(year, month, days);
}
return function(produceList, fromDate, toDate) {
if(fromDate && toDate){
var filtered = [];
angular.forEach(produceList, function(items) {
if (items.produceDate > Date.parse(fromStr2Date(fromDate)) && items.produceDate < Date.parse(fromStr2Date(toDate)))
filtered.push(items);
});
return filtered;
}
else
return produceList;
}})<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.min.css" rel="stylesheet" type="text/css" />
<div ng-app='app' ng-controller="MyController">
<div>
fromDate: <datepicker date-format="dd/MM/yyyy"><input ng-model="from_date" type="text"/></datepicker>
</div>
<div>
toDate: <datepicker date-format="dd/MM/yyyy"><input ng-model="to_date" type="text"/></datepicker>
</div>
search:
<br/>
<input type='text' ng-model='search'/>
<ul>
<li ng-repeat="item in produceList | dateRange:from_date:to_date |filter:search">
{{item | json}}
</li>
</ul>
</div>