AngularJS过滤器和使用ng-重复的日期显示范围
AngularJS过滤器和使用ng-重复的日期显示范围
提问于 2014-01-17 01:57:55
对于AngularJS-或者整个网络开发领域来说，
我甚至不确定这是否可能，或者我正在采取最有效的路径，但我目前需要一种使用两个输入框过滤日期范围的方法，我正在使用jquery数据报警器将日期格式化为“YYYY 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重复指令的表，从本地的JSON file...only获取数据--接收到dueDate。
<tr> ng-repeat="dateItem in dateItems | filter:search:strict | filter:dateFilter"
<td>{{dateItem.dueDate}}</td></tr>我需要一个方法来说，
- 如果用户仅在dueDate字段中选择日期，ng重复列表将筛选并列出从该日期开始的所有日期。
- 如果用户仅在toDate字段中选择日期，则ng重复。 list将过滤并列出所有的日期，直到并包括 特定的日期。
- 如果用户在两个字段中选择日期，列表将显示所有 这两个日期之间的日期。
我完全不知道该走哪条路，我一直在想，我必须编写一个自定义筛选函数，并将日期与if语句进行比较，等等，但我没有足够的代码来说明.
如有任何帮助或指导，将不胜感激！
谢谢!
因此，我最终试图编写一个自定义筛选函数，使我的abilities..it最好地发挥作用，但是.(如果我去掉粗体的条件语句，它就能工作了.
$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;
}
};回答 2
Stack Overflow用户
发布于 2014-01-17 02:16:39
您熟悉角引导UI吗？http://angular-ui.github.io/bootstrap/
有一个扩展可能是您在这里寻找的：http://eternicode.github.io/bootstrap-datepicker/
您可以使用日期选择器来显示可用日期，而不是使用重复的日期列表。因为我认为这可能更容易让人联想到。
编辑：
否则，可以编写日期范围筛选器来处理此功能。这可能是一个启动https://gist.github.com/Voles/5459410的好地方
使用:ng-重复=“._
我在我的电话，所以我不能给你一个实施在这个时候。另一个用户可能需要帮助。
Stack Overflow用户
发布于 2019-02-01 09:37:51
自定义筛选器，用于显示来自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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21176518
复制相关文章
相似问题
腾讯云开发者
