I'm trying to filter my list in ng-repeat by whether or not one of the variables falls within the dates selected.
I've tried playing around with custom filters to do this but have come away with nothing so far. The variables I'm trying to fitler are in dd-MM-yyyy HH:mm format.
HTML
<div>
<input ng-model="dateFrom" />
<input ng-model="dateTo" />
<div ng-repeat="x in log2 | myfilter:dateFrom:dateTo" > {{x.Name}} In: {{x.In }} Out: {{x.Out}}</div>
</div>
Javascript
MyApp.controller("MainController", function MainController($scope, $timeout, $firebaseArray, $filter, $window) {
$scope.log2 = [
{"Name": "John",
"In": "10-10-2017 11:42",
"Out": "10-10-2017 11:55",},
{"Name": "Rob",
"In": "10-01-2018 13:03",
"Out": "10-01-2018 14:30",}
]
$scope.dateFrom = "10-10-2000 ";
$scope.dateTo = "10-10-3000 ";
});
MyApp.filter("myfilter", function() {
return function(items, $scope) {
var df = $scope.dateFrom;
var dt = $scope.dateTo;
var result = [];
for (var i=0; i<items.length; i++){
var tf = new Date(items[i].In ),
tt = new Date(items[i].Out );
if (tf > df && tt < dt) {
result.push(items[i]);
}
}
return result;
};
});
tried searching a few things and haven't had any luck so far. Have thought about using ISO date format but unsure how to convert my existing data into ISO format in angular.
Thanks in advance for any assistance
You can easily achieve that using the angularjs filter and moment.js(library)
Look at the sample code below:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.js"></script>
<script src="https://code.angularjs.org/1.6.6/angular.js"></script>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.dateFrom = "2017-11-01";
$scope.dateTo = "2019-08-03";
$scope.log2 = [{
"Name": "John",
"In": "10-10-2017 11:42",
"Out": "10-10-2018 11:55",
}, {
"Name": "Rob",
"In": "10-01-2018 13:03",
"Out": "10-01-2018 14:30",
}]
});
app.filter("myfilter", function($filter) {
return function(items, from, to, dateField) {
startDate = moment(from);
endDate = moment(to);
return $filter('filter')(items, function(elem) {
var dateIn = moment(elem['In']);
var dateOut = moment(elem['Out']);
return (dateIn >= startDate && dateIn <= endDate) || (dateOut >= startDate && dateOut <= endDate);
});
};
});
</script>
</head>
<body>
<div ng-controller="MainCtrl">
<input type="text" name="S_Date" ng-model="dateFrom" />
<input type="text" name="E_Date" ng-model="dateTo" />
<div ng-repeat="x in log2 | myfilter:dateFrom:dateTo" > {{x.Name}} <b>In:</b> {{x.In }} <b>Out:</b> {{x.Out}}</div>
</div>
</body>
</html>