Angular Filter by Date/Time Range - angularjs

I'm trying to build an event date filter by passing in a time range. I was able to filter for events that are the same date as today but need help to filter events from last week, last month, etc...
$scope.eventDateFilter = function(column) {
if(column === 'today') {
$scope.dateRange = $scope.dateToday;
} else if (column === 'pastWeek') {
//need logic
} else if (column === 'pastMonth') {
//need logic
} else if (column === 'future') {
//need logic
} else {
$scope.dateRange = "";
}
}
Here's my fiddle:
http://jsfiddle.net/c6BfQ/3/
Your help is greatly appreciated.

I would use a custom filter. Here is one I used to filter things created in the last two days, it should give you an idea of how to do yours.
.filter('dateFilter', function() {
return function (objects) {
var filtered_list = [];
for (var i = 0; i < objects.length; i++) {
var two_days_ago = new Date().getTime() - 2*24*60*60*1000;
var last_modified = new Date(objects[i].date_created).getTime();
if (two_days_ago <= last_modified) {
filtered_list.push(objects[i]);
}
}
return filtered_list;
}
});

Related

AngularJS multiselect custom filter not working as intended

In an AngularJS record display (with filters) I have a multiselect array of territories that a user can select from to find out if a certain item is available in a certain territory.
The array returns a list of values such as
['001','010','200']
based on the ID of the territories selected. This is then checked against a JSON list of records which has a JSON value looks like this
territoriesnotavailable: "001, 085, 090"
Each record either has this set to null, or has a list from one to many numbers.
I currently use the following code (customFilter) which works perfectly if you only select ONE value.. it basically makes the item filter out if the territory selected in the multiselect is in the list of territoriesnotavailable
function CustomTerritoryFilter() {
return function(data, query) {
if (query.length === 0) return data;
if (data) return data.filter(function(item) {
for (var i = 0; i < query.length; i++) {
var queryitem = query[i]["id"];
if(item.territoriesnotavailable) {
stringB = item.territoriesnotavailable;
} else {
stringB = 'xxxxxxxx';
}
stringA = queryitem;
if (!(stringB.indexOf( stringA ) > -1)) {
return data;
}
}
});
return [];
};
}
So if I choose only one filter (resulting in a query of ['010'] for example. and this appears in territoriesnoavailable for the record.. it vanishes as expected.. but if I choose any value that is NOT in territoriesnotavailable the item appears again.. i need the record to vanish if ANY selected territory appears in the list regardless of any that do not
function CustomTerritoryFilter() {
return function(data, query) {
if (query.length === 0) return data;
if (data) return data.filter(function(item) {
for (var i = 0; i < query.length; i++) {
var queryitem = query[i]["id"];
if(item.territoriesnotavailable) {
stringB = item.territoriesnotavailable;
} else {
stringB = 'xxxxxxxx';
}
stringA = queryitem;
if (!(stringB.indexOf( stringA ) > -1)) {
return false;
}
}
return true;
});
return [];
};
}
This is the code that I settled on. It basically sets a flag as 1 (show) and then checks each number in the filter.. if there is just one occurance of the number in the list, the flag is set to zero. At the end of the check data is shown if the flaG REMAins as 1
function CustomTerritoryFilter() {
return function(data, query) {
if (query.length === 0) return data;
if (data) return data.filter(function(item) {
var flag = 1;
for (var i = 0; i < query.length; i++) {
var queryitem = query[i]["id"];
if(item.territoriesnotavailable) {
stringB = item.territoriesnotavailable;
} else {
stringB = 'xxxxxxxx';
}
stringA = queryitem;
if (stringB.indexOf( stringA ) > -1) {
flag = 0;
}
}
if(flag === 1) {
return data;
}
});
return [];
};
}

Why array save last data and doesn't clears?

I have a simple AngularJs application of medical cards.
I have storage with it and display it at my home.html using dx-datagrid:
One card has many records, I get records of card from recordsArray by cardId
getVardsRecordsByCardId: function (id, recordsArray) {
if (recordsArray.length != 0) {
for (var i = 0; i < recordsArray.length; i++) {
if (recordsArray[i].cardId === id) {
cardsRecords = cardsRecords.concat(recordsArray[i]);
}
}
}
return cardsRecords;
}
Now I have records just in the third card. I added a function on button for testing it:
var jdskla = [];
var localCardId = 0;
$scope.showCardDetails = {
text: "",
type: "default",
icon: "preferences",
onClick: function () {
if ($scope.itemIdFromShowButton) {
$location.path('/carddetail/' + $scope.itemIdFromShowButton);
var jdskla =[];
var jdskla = businessLogicOfMyApp.getVardsRecordsByCardId($scope.itemIdFromShowButton, $scope.recordsArray);
console.log($scope.itemIdFromShowButton)
console.log(jdskla);
}
else {
alert("Error!!!");
}
}
};
1,3,1 is cardId's and array of records. But, why array of card records don't clears and save last data?
May be somebody know how I can resolve it? Thanks for your answers!
P.S. I'm using ng-view directive in my app and i tried to clear my array use another button:
$scope.backToGeneralPage = {
text: "Back",
onClick: function () {
jdskla = [];
$location.path('/');
}
};
but it wasn't helpful.
You should initialize cardsRecords array in function getVardsRecordsByCardId.
getVardsRecordsByCardId: function (id, recordsArray) {
var cardsRecords = []; // initialize array locally
if (recordsArray.length != 0) {
for (var i = 0; i < recordsArray.length; i++) {
if (recordsArray[i].cardId === id) {
cardsRecords.push(recordsArray[i]);
}
}
}
return cardsRecords;
}

Filter current dates only in ng-repeat array

I have a filter which needs to return only current dates in a data array:
app.filter('currentDates', function() {
return function(eventdata) {
var data_date, filtered_list, i, today;
filtered_list = [];
i = 0;
while (i < eventdata.length) {
today = Date.now();
data_date = eventdata.date;
if (today <= data_date) {
filtered_list.push(data[i]);
}
i++;
}
return filtered_list;
};
});
I'm calling the filter in the html like so:
<div class="event" ng-repeat="data in eventdata | currentDates"></div>
I can't figure out why nothing is being returned. Any help appreciated. Here's the plunkr http://plnkr.co/edit/5aT4CF?p=preview. If you remove the filter the data populates.
Your eventdata is array not single object
You are comparing string with date
You are pushing data[i] instead of eventdata[i]
Try like this
while (i < eventdata.length) {
today = Date.now();
data_date = new Date(eventdata[i].date);
if (today <= data_date) {
filtered_list.push(eventdata[i]);
}
i++;
}
PLUNKR
As was explained in the comments, you are comparing a Date type with a string. You need to perform type conversion on that string.
I also went with a for loop instead of a while loop to save a couple of lines of space.
Your filter function should look like this
app.filter('currentDates', function() {
return function(eventdata) {
var filtered_list = [];
for (var i = 0; i < eventdata.length; i++) {
var today = Date.now();
var data_date = new Date(eventdata[i].date).getTime();
if (today <= data_date) {
filtered_list.push(eventdata[i]);
}
}
return filtered_list;
};
});
Here is the updated plunkr
http://plnkr.co/edit/qZrQEOJDtyBOWSkNnrZS?p=preview

checkbox filter for json array in Angularjs

I have create a filter but this filter is not working with array inside array.
'http://plnkr.co/edit/oygy79j3xyoGJmiPHm4g?p=info'
Above plkr link is working demo.
app.filter('checkboxFilter', function($parse) {
var cache = { //create an cache in the closure
result: [],
checkboxData: {}
};
function prepareGroups(checkboxData) {
var groupedSelections = {};
Object.keys(checkboxData).forEach(function(prop) {
//console.log(prop);
if (!checkboxData[prop]) {
return;
} //no need to create a function
var ar = prop.split('=');
//console.log("ar is - "+ar);
if (ar[1] === 'true') {
ar[1] = true;
} //catch booleans
if (ar[1] === 'false') {
ar[1] = false;
} //catch booleans
/* replacing 0 with true for show all offers */
if(ar[0]=='SplOfferAvailable.text'){
ar[1]='true';
}else{
}
//make sure the selection is there!
groupedSelections[ar[0]] = groupedSelections[ar[0]] || [];
//at the value to the group.
groupedSelections[ar[0]].push(ar[1]);
});
return groupedSelections;
}
function prepareChecks(checkboxData) {
var groupedSelections = prepareGroups(checkboxData);
var checks = [];
//console.log(groupedSelections);
Object.keys(groupedSelections).forEach(function(group) {
//console.log("groupedSelections- "+groupedSelections);
//console.log("group- "+group);
var needToInclude = function(item) {
//console.log("item- "+item);
// use the angular parser to get the data for the comparson out.
var itemValue = $parse(group)(item);
var valueArr = groupedSelections[group];
//console.log("valueArr- "+valueArr);
function checkValue(value) { //helper function
return value == itemValue;
}
//check if one of the values is included.
return valueArr.some(checkValue);
};
checks.push(needToInclude); //store the function for later use
});
return checks;
}
return function(input, checkboxData, purgeCache) {
if (!purgeCache) { //can I return a previous 'run'?
// is the request the same as before, and is there an result already?
if (angular.equals(checkboxData, cache.checkboxData) && cache.result.length) {
return cache.result; //Done!
}
}
cache.checkboxData = angular.copy(checkboxData);
var result = []; // this holds the results
//prepare the checking functions just once.
var checks = prepareChecks(checkboxData);
input.every(function(item) {
if (checks.every(function(check) {
return check(item);
})) {
result.push(item);
}
return result.length < 10000000; //max out at 100 results!
});
cache.result = result; //store in chache
return result;
};
});
above code is for check box filter.
when i click on checkbox called "Availability" it does not filter the result.
Please help me out.
Thanks.
I think that the way you are navigating through json is wrong because if you put in this way it works
"Location": "Riyadh",
"AvlStatus": "AVAILABLE"
"Rooms": {.....
You have to go in some way through Rooms and right now I think you're not doing that

Date Field validation issues

The date field doesn't get validated for a format like 2013-02-13, but it works for 2013-12-12. Leading zero seems to be creating problem in any node form. I have "clientside validation" module on. I couldn't find anything related to this bug/issue anywhere, so I am posting here.
Can anyone help me?
There is issue in clientside validation js due to using of parseInt for validating a month & day value of a date. just replace with it
jQuery.validator.addMethod("dateFormat", function(value, element, param) {
var parts = value.split(param.splitter);
var expectedpartscount = 0;
var day = parseInt(parts[param.daypos], 10);
var month = parseInt(parts[param.monthpos], 10);
month = month - 1;
var year = parseInt(parts[param.yearpos], 10);
var date = new Date();
var result = true;
/* if (day.toString().length !== parts[param.daypos].length){
result = false;
}
if (month.toString().length !== parts[param.monthpos].length){
result = false;
}*/
if (year.toString().length !== parts[param.yearpos].length){
result = false;
}
if (param.yearpos !== false){
expectedpartscount++;
date.setFullYear(year);
if (year !== date.getFullYear()) {
result = false;
}
}
if (param.monthpos !== false) {
expectedpartscount++;
date.setMonth(month);
if (month !== date.getMonth()) {
result = false;
}
}
if (param.daypos !== false) {
expectedpartscount++;
date.setDate(day);
if (day !== date.getDate()) {
result = false;
}
}
if (expectedpartscount !== parts.length) {
result = false;
}
return this.optional(element) || result;
}, jQuery.format('The date is not in a valid format'));

Resources