javascript AngularJS 过滤器和使用 ng-repeat 显示日期范围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21176518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS filter and display range of dates using ng-repeat
提问by ZvKa
new to AngularJS- or the whole web development scene,
AngularJS 或整个 Web 开发场景的新手，
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".
我什至不确定这是否可行，或者我正在采取最有效的路径，但我目前需要一种使用两个输入框过滤日期范围的方法，我正在使用 jquery datepicker 来始终格式化日期为“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.
当然，我有一个带有 ng-repeat 指令的表，从本地 JSON 文件中获取其数据……只收到了 DueDate。
<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.
如果用户仅在 DueDate 字段上选择日期，则 ng-repeat 列表将过滤并列出从该日期开始的所有日期。
如果用户仅在 toDate 字段上选择日期，则 ng-repeat
列表将过滤并列出 UP TO 的所有日期，包括该
特定日期。如果用户在两个字段中都选择了日期，则列表将显示
这两个日期之间的所有日期。
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...
我对走哪条路很迷茫，我一直在想我必须编写一个自定义过滤器函数并将日期与 if 语句等进行比较，但我没有足够的代码来说明这里。 ..
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;
}
};
回答by Matthew.Lothian
Are you familiar with angular bootstrap UI? http://angular-ui.github.io/bootstrap/
你熟悉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/
有一个扩展可能是您在这里寻找的：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
否则，您可以编写一个日期范围过滤器来处理此功能。这可能是一个开始的好地方 https://gist.github.com/Voles/5459410
useage: ng-repeat="... | daterage:start:end"
用法：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.
我正在使用手机，因此目前无法为您提供实施方案。另一个用户可能会同意。
回答by Srinivasan N
Custom filter used to display dates between the selected dates from json or array
自定义过滤器用于显示来自 json 或数组的选定日期之间的日期
var app = angular.module("myApp",[])
.directive("datepicker1",function(){
return{
restrict:"A",
link:function(scope,el,attr){
el.datepicker({
dateFormat:'yy-mm-dd'
});
}
};
})
.directive("datepicker2",function(){
return{
restrict:"A",
link:function(scope,el,attr){
el.datepicker({
dateFormat:'yy-mm-dd'
});
}
};
})
.filter('myFilter',function(){
return function(items, fromdate,todate){
var arrayReturn = [];
items.forEach(function(val,i){
var a = new Date(items[i].cdet.cdate.date);
console.log(a)
console.log(fromdate)
//var yy = a.getFullYear();
//var mm = a.getMonth()+1;
//var dd = a.getDate();
var myDate = a;
var fr = new Date(fromdate);
var to = new Date(todate);
if(myDate >= fr && myDate <= to){
arrayReturn.push(items[i]);
}
});
return arrayReturn;
}
})
.controller('myCtrl',function($scope){
$scope.startdate = "2017-10-18";
$scope.enddate = "2019-1-28"
$scope.names = [
{
"cname" : "A",
"cdet":{
cdate:{
date:"2018-5-15"
}
}
},
{
"cname" : "B",
"cdet":{
cdate:{
date:"2017-5-20"
}
}
},
{
"cname" : "C",
"cdet":{
cdate:{
date:"2019-5-13"
}
}
},
{
"cname" : "D",
"cdet":{
cdate:{
date:"2018-10-2"
}
}
},
{
"cname" : "E",
"cdet":{
cdate:{
date:"2018-12-8"
}
}
}
];
});<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
From Date:<input type="text" datepicker1 ng-model="startdate"/>
To Date:<input type="text" datepicker2 ng-model="enddate"/>
<ul ng-repeat="name in names | myFilter:startdate:enddate">
<li><span>{{ name.cname }}</span> | <span>{{ name.cdet.cdate.date }}</span></li>
</ul>
</div>