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(newDate(2017, 5, 9))},
{itemName:'Sam', produceDate: Date.parse(newDate(2017, 5, 10))},
{itemName:'Paul', produceDate: Date.parse(newDate(2017, 5, 11))},
{itemName:'Henry', produceDate: Date.parse(newDate(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);
returnnewDate(year, month, days);
}
returnfunction(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;
}
elsereturn produceList;
}})<scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.min.css"type="text/css" /><divng-app='app'ng-controller="MyController"><div>
fromDate: <datepickerdate-format="dd/MM/yyyy"><inputng-model="from_date"type="text"/></datepicker></div><div>
toDate: <datepickerdate-format="dd/MM/yyyy"><inputng-model="to_date"type="text"/></datepicker></div>
search:
<br/><inputtype='text'ng-model='search'/><ul><ling-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><scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.min.css"rel="stylesheet"type="text/css" /><divng-app='app'ng-controller="MyController"><div>
fromDate: <datepickerdate-format="dd/MM/yyyy"><inputng-model="from_date"type="text"/></datepicker></div><div>
toDate: <datepickerdate-format="dd/MM/yyyy"><inputng-model="to_date"type="text"/></datepicker></div>
search:
<br/><inputtype='text'ng-model='search'/><ul><ling-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';
returnfunction(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;
}
elsereturn produceList;
}})
</script></body></html>
Post a Comment for "Trouble In Filter Table Data Between Two Selected Dates Using Angularjs"