AngularJS filter and display range of dates using ng
new to AngularJS- or the whole web development scene,
I am not even sure if this is possible or I am taking the most efficient path but I'm currently in need of a way to filter the range of dates using two input boxes, I'm using a jquery datepicker to always format the date to be "YYYY-MM-DD".
So, I have the following two input boxes,
<label class="" for="DateFromFilter">
Date From:
</label>
<input date-picker type="text" id="DateFromFilter"
class="form-control"
title="Please enter in YYYY-MM-DD format."
ng-model="search.dueDate" />
<label class="" for="DateToFilter">
Date To:
</label>
<input date-picker type="text" id="DateToFilter"
class="form-control"
title="Please enter in YYYY-MM-DD format."
ng-model="search.toDate" />
And of course I have a table with a ng-repeat directive, getting its data from a local JSON file...only the dueDate is received.
<tr> ng-repeat="dateItem in dateItems | filter:search:strict | filter:dateFilter"
<td>{{dateItem.dueDate}}</td></tr>
I need a way to let's say,
if the user selects a date on the dueDate field ONLY, the ng-repeat list will filter and list all the dates FROM that date and onwards.
if the user selects a date on the toDate field ONLY, the ng-repeat
list will filter and list all the dates UP TO and including that
certain date.
if the user selects dates on both fields, the list will display all
the dates between those two dates.
I'm so lost on which route to take, I've been thinking I have to write a custom filter function and compare the dates with if statements and so on but I don't have a decent enough of a code to illustrate here...
any help or guidance will be greatly appreciated!
Thank you!
---------------------------------------------UPDATE-------------------------------
So I ended up trying to write a custom filter function to the best of my abilities..it does not work though....;( It kinda works if I take out the bolded conditional statements...
$scope.dateFilter = function (item) {
/*
* When the display starts, the inputs are undefined. also need to
* account for when the inputs are empty to return everything.
*/
if ((!angular.isUndefined($scope.dueDate) && $scope.dueDate != "" ) **&&
(angular.isUndefined($scope.toDate) || $scope.toDate == "" )**)
{
var inputDate = new Date($scope.dueDate);
var incomingDate = new Date(item.dueDate);
if (inputDate <= incomingDate)
{
return true;
}
else
{
return false;
}
}
else if ((!angular.isUndefined($scope.toDate) && $scope.toDate != "")**&&
(angular.isUndefined($scope.dueDate) || $scope.dueDate == "" )**)
{
var inputDate = new Date($scope.toDate);
var incomingDate = new Date(item.dueDate);
if (inputDate >= incomingDate)
{
return true;
}
else
{
return false;
}
}
else if ((!angular.isUndefined($scope.dueDate) && $scope.dueDate != "" )&&
(!angular.isUndefined($scope.toDate) && $scope.toDate != ""))
{
var inputDueDate = new Date($scope.dueDate);
var inputToDate = new Date($scope.toDate);
if (inputDueDate < item.dueDate && inputToDate > item.dueDate )
{
return true;
}
else
{
return false;
}
}
else
{
return true;
}
};
Are you familiar with angular bootstrap UI? http://angular-ui.github.io/bootstrap/
There is an extension that might be what you are looking for here: http://eternicode.github.io/bootstrap-datepicker/
Instead of using a repeated list of dates you could use a date picker to display the available dates. As I think it might be easier to implament.
Edit:
Otherwise you could write a date range filter to handle this functionality. This might be a good place to start https://gist.github.com/Voles/5459410
useage: ng-repeat="... | daterage:start:end"
I am on my phone so am unable to give you an implementation at this time. Another user may be able to oblige.
链接地址: http://www.djcxy.com/p/76946.html