Question

AngularJS的新手 - 或整个网络开发场景，

我甚至不确定这是否可行，或者我正在采用最有效的路径，但我目前需要一种方法来使用两个输入框来过滤日期范围，我使用jquery datepicker来始终将日期格式化为“YYYY-MM-DD”。

所以，我有以下两个输入框，

<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" />

当然我有一个带有ng-repeat指令的表，从本地JSON文件中获取数据......只接收到dueDate。

<tr> ng-repeat="dateItem in dateItems | filter:search:strict | filter:dateFilter" 
<td>{{dateItem.dueDate}}</td></tr>

我需要一种让我们说的方式，

如果用户仅在dueDate字段上选择日期，则为ng-repeat 列表将过滤并列出该日期及之后的所有日期。
如果用户仅在toDate字段上选择日期，则ng-repeat
列表将过滤并列出所有日期，包括该日期某个日期。
如果用户在两个字段上选择日期，则列表将显示全部
这两个日期之间的日期。

我迷失在哪条路上，我一直在想我必须编写一个自定义过滤器函数并将日期与if语句进行比较等等但我没有足够的代码来这里说明......

任何帮助或指导将不胜感激！

谢谢！

---------------------------------------------更新 - ------------------------------

所以我最终试图尽我所能写一个自定义过滤器功能..虽然不起作用....;（如果我拿出粗体条件语句，它有点起作用......

$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;
  }      
};

Answer 1

您熟悉角度引导UI吗？ http://angular-ui.github.io/bootstrap/

您可以在此处找到一个扩展程序：http://eternicode.github.io/bootstrap-datepicker/

您可以使用日期选择器显示可用日期，而不是使用重复的日期列表。我认为它可能更容易被植入。

编辑：

否则，您可以编写日期范围过滤器来处理此功能。这可能是一个很好的起点 https://gist.github.com/Voles/5459410

用法：ng-repeat =“... | daterage：start：end”

我在手机上，所以此时无法给你实施。另一个用户可能有责任。

Answer 2

自定义过滤器，用于显示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>

AngularJS使用ng-repeat过滤并显示日期范围

2 个答案: