如何在角度js中使用日期过滤数据

How to Filter data using date in angular js?

本文关键字:日期 过滤 数据 js      更新时间:2023-09-26

我有学生姓名列表,我想使用两个日期过滤姓名。

我有两个日期选择器,一个用于from date另一个用于to date.如果用户选择2015-10-19作为from date2015-10-20作为to date,则名称列表应该显示在这两个日期之间。

示例用户选择上述日期

列表应为

  1. 拉梅什
  2. 维涅什
  3. 萨拉特
  4. 戈马尔

我在下面添加了我的代码,有人可以帮助我.

<!--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>