如何在角度js中使用日期过滤数据
How to Filter data using date in angular js?
我有学生姓名列表,我想使用两个日期过滤姓名。
我有两个日期选择器,一个用于from date
另一个用于to date
.如果用户选择2015-10-19
作为from date
,2015-10-20
作为to date
,则名称列表应该显示在这两个日期之间。
示例用户选择上述日期
列表应为
- 拉梅什
- 维涅什
- 萨拉特
- 戈马尔
我在下面添加了我的代码,有人可以帮助我.
<!--begin snippet: js hide: false -->
<!--language: lang-js -->
angular.module("date", [])
.directive("datepicker", function () {
return {
restrict: "A",
link: function (scope, el, attr) {
el.datepicker({
dateFormat: 'yy-mm-dd'
});
}
};
})
.directive("datepicker1", function () {
return {
restrict: "A",
link: function (scope, el, attr) {
el.datepicker({
dateFormat: 'yy-mm-dd'
});
}
};
})
.controller("dateCtrl", function ($scope) {
$scope.names= [{
id: "1",
C_Name: "Ramesh",
C_Phone: "*******",
C_Option: {
"date": {
"$date": "2015-10-19T09:52:26.507Z"
}
}
}, {
id: "2",
C_Name: "Suresh",
C_Phone: "*****",
C_Option: {
"date": {
"$date": "2015-10-21T09:52:26.507Z"
}
}
}, {
id: "3",
C_Name: "Vignesh",
C_Phone: "*******",
C_Option: {
"date": {
"$date": "2015-10-20T09:52:26.507Z"
}
}
},
{
id: "4",
C_Name: "Sarath",
C_Phone: "******",
C_Option: {
"date": {
"$date": "2015-10-20T09:52:26.507Z"
}
}
},
{
id: "5",
C_Name: "Sundhar",
C_Phone: "******",
C_Option: {
"date": {
"$date": "2015-10-21T09:52:26.507Z"
}
}
},
{
id: "6",
C_Name: "Rajesh",
C_Phone: "******",
C_Option: {
"date": {
"$date": "2015-10-18T09:52:26.507Z"
}
}
},
{
id: "7",
C_Name: "Gomal",
C_Phone: "******",
C_Option: {
"date": {
"$date": "2015-10-20T09:52:26.507Z"
}
}
}
]
});
<!-- language: lang-html -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-app="date">
<div ng-controller="dateCtrl">
<!-- jq -->
<!-- ng -->
From Date:<input type="text" datepicker ng-model="date2" />
<span>{{date2}}</span>
To Date:<input type="text" datepicker1 ng-model="date3" />
<span>{{date3}}</span>
<br><br><br>
<label>List Of Names</label>
<br>
<div ng-repeat="name in names | filter:search" >
<br>{{name.C_Name}}
<br>
</div>
</div>
</div>
<!-- end snippet -->
演示 @ JSFiddle
工作小提琴:
HTML 中的更改:
<div ng-repeat="name in names | myfilter:date2:date3" >
JavaScript 中的更改:添加以下自定义过滤器
moduleName.filter("myfilter", function() {
return function(items, from, to) {
var arrayToReturn = [];
for (var i=0; i<items.length; i++){
var test = new Date(items[i].C_Option.date.$date);
var month = test.getMonth()+1;
var date = test.getDate();
var year = test.getFullYear();
var newDate = year+"-"+month+"-"+date
if (newDate>= from && newDate <= to) {
arrayToReturn.push(items[i]);
}
}
return arrayToReturn;
};
})
来源: https://stackoverflow.com/a/25521779/3186722
您需要为此功能创建自定义筛选器函数,并将记录上的日期与用户输入的开始和结束日期进行比较。
我使用 moment.js
进行日期比较,因为它是日期比较的最佳库。
网页代码:
<div ng-repeat="name in names | filter: dateRangeFilter('C_Option', date2, date3)">
<br>{{name.C_Name}}
<br>
</div>
<span>{{resultsCount}} records returned</span>
JQUERY代码:
$scope.dateRangeFilter = function(property, startDate, endDate) {
return function(item) {
$scope.resultsCount = 0;
if (item[property] === null){
return false;
}
var localEndDate ='';
if(typeof endDate === 'undefined' ){
localEndDate = moment(new Date(),"DD-MM-YYYY") +'T23:59:59.000Z';
}else{
localEndDate = endDate + 'T23:59:59.000Z';
}
var currentDate = moment(item[property].date.$date, "DD-MM-YYYY");
var s = moment(startDate, "DD-MM-YYYY");
var e = moment(localEndDate, "DD-MM-YYYY");
if (currentDate >= s && currentDate <= e) {
$scope.resultsCount++;
return true;
}
return false;
}
}
现场演示 @ JSFiddle
更新:代码更新以显示过滤后的记录计数。
var nameSpace = angular.module('tst',[]);
nameSpace.controller('MyController', function MyController($scope) {
$scope.date1 = "27-05-2010"
$scope.date2 = "29-07-2015";
$scope.orders = [
{
"date1": 1306487800,
"date2": 1406587800
},
{
"date1": 1196487800,
"date2": 1406597800
}]
});
// parse a date in dd-mm-yyyy format
function parseDate(input) {
var parts = input.split('-');
// Note: months are 0-based
return new Date(parts[2], parts[1]-1, parts[0]);
}
nameSpace.filter("myfilter", function() {
return function(items, from, to) {
var df = parseDate(from);
var dt = parseDate(to);
var arrayToReturn = [];
for (var i=0; i<items.length; i++){
var tf = new Date(items[i].date1 * 1000),
tt = new Date(items[i].date2 * 1000);
if (tf > df && tt < dt) {
arrayToReturn.push(items[i]);
}
}
return arrayToReturn;
};
});
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-app="tst">
<div ng-controller="MyController">
<table>
<tr>
<td>From:<input ng-model="date1" type="text" placeholder="" /></td>
<td>To:<input ng-model="date2" type="text" placeholder="" /></td>
</tr>
<tr ng-repeat="order in orders | myfilter:date1:date2">
<td>{{order.date1 * 1000 | date:'dd-MM-yyyy'}}</td>
<td>{{order.date2 * 1000 | date:'dd-MM-yyyy'}}</td>
</tr>
</table>
</div>
</div>
相关文章:
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 如何从Wijmo过滤flexgrid中的日期
- 过滤日期范围 angularjs 时出错
- AngularJS过滤格式化的日期
- 在JavaScript中,按日期和之后的名称过滤数组
- 如何在 Angular js 中按日期过滤数据
- JavaScript 智能日期过滤
- 按输入日期过滤 ng 重复
- 拉拉维尔角度如何过滤碳串上的日期
- Dojo 网格:将过滤条件发送到服务器,具有有效日期
- 如何使用角度js按月和年正确过滤日期
- 酒窝.js使用日期范围过滤 X 轴
- 角度JS过滤日期
- ng 表过滤毫秒日期数据
- angular - 过滤开始日期和结束日期在所选月份和年份范围内的所有对象
- 如何在角度js中使用日期过滤数据
- 为morris图表添加了日期过滤组件
- 如何使用动态日期过滤oData调用
- JavaScript | AngularJS:根据日期过滤结果过滤项目
- 如何使用JSON格式的日期过滤数据