Trouble In Filter Table Data Between Two Selected Dates Using Angularjs
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. ProductionControlle
Solution 1:
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" 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>Solution 2:
Here is your required solution. I too used moment js, but took rather a simple approach by comparing the epoch times as per the data given by you.
<!DOCTYPE html>
<html>
<body>
<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>
<script>
angular.module('app', ['720kb.datepicker']).controller('MyController', function ($scope) {
var formatStr = 'DD/MM/YYYY';
$scope.from_date = moment("2017-04-05").format(formatStr);
$scope.to_date = moment("2017-04-29").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": 1491808021000,
"produceId": 66
},
{
"itemName": "test1",
"produceDate": 1491805456000,
"produceId": 65
},
{
"itemName": "test2",
"produceDate": 1490615680000,
"produceId": 65
},
{
"itemName": "test3",
"produceDate": 1490615515000,
"produceId": 65
},
{
"itemName": "test4",
"produceDate": 1490611140000,
"produceId": 65
},
{
"itemName": "test5",
"produceDate": 1490352067000,
"produceId": 65
},
{
"itemName": "test6",
"produceDate": 1490271418000,
"produceId": 65
},
{
"itemName": "test7",
"produceDate": 1489828994000,
"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) {
console.log('a',items.produceDate)
console.log(Date.parse(moment(fromDate, formatStr)))
if (items.produceDate > Date.parse(moment(fromDate, formatStr)) && items.produceDate < Date.parse(moment(toDate, formatStr)))
filtered.push(items);
});
return filtered;
}
else
return produceList;
}})
</script>
</body>
</html>
Post a Comment for "Trouble In Filter Table Data Between Two Selected Dates Using Angularjs"