angularjs angularjs-ng-repeat angular-filters ng-filter

Trying to Display Results between Two Dates Using AngularJS

I am trying to search based on title, TicketId, date range (from to)

Not all search inputs need to be filled.

If a person entered the first date only, It will return output with that date if both dates are entered, then it will print all results between both dates

Ignore the CSS file.I added it to show you how it should look like

Also, How can I add a reset button to remove all data written in the input?

var app = angular.module('app', []);

app.controller('engsCtrl', function($scope) {
  $scope.orderProperty = "Title";
  $scope.search = {};
  $scope.userInput = {};
  $scope.worktime = [{
      Title: "[email protected]",
      TimeIn: "2017\/11\/08 00:45",
      TimeOut: "2017\/11\/08 01:45",
      TravelTime: "01:00",
      ProcureTime: "01:00",
      WorkLog: "adfadf",
      TicketId: 17554
    },
    {
      Title: "[email protected]",
      TimeIn: "2017\/11\/08 00:45",
      TimeOut: "2017\/11\/08 01:45",
      TravelTime: "01:00",
      ProcureTime: "01:30",
      WorkLog: "-",
      TicketId: 17554
    },
    {
      Title: "[email protected]",
      TimeIn: "2017\/11\/08 00:45",
      TimeOut: "2017\/11\/08 01:45",
      TravelTime: "01:00",
      ProcureTime: "01:00",
      WorkLog: "-",
      TicketId: 175540
    },
    {
      Title: "[email protected]",
      TimeIn: "2017\/11\/08 00:45",
      TimeOut: "2017\/11\/08 01:45",
      TravelTime: "01:00",
      ProcureTime: "01:00",
      WorkLog: "-",
      TicketId: 175540
    },
    {
      Title: "[email protected]",
      TimeIn: "2017\/11\/08 00:45",
      TimeOut: "2017\/11\/08 01:45",
      TravelTime: "01:00",
      ProcureTime: "01:00",
      WorkLog: null,
      TicketId: 175540
    },
    {
      Title: "[email protected]",
      TimeIn: "2017\/11\/08 00:45",
      TimeOut: "2017\/11\/08 01:45",
      TravelTime: "01:00",
      ProcureTime: "01:00",
      WorkLog: null,
      TicketId: 175540
    },
    {
      Title: "[email protected]",
      TimeIn: "2017\/11\/21 00:00",
      TimeOut: "2017\/11\/21 01:00",
      TravelTime: "01:00",
      ProcureTime: "01:15",
      WorkLog: "-",
      TicketId: 17554
    },
    {
      Title: "[email protected]",
      TimeIn: "2017\/11\/21 10:57",
      TimeOut: "2017\/11\/22 10:57",
      TravelTime: "00:00",
      ProcureTime: "00:00",
      WorkLog: "-",
      TicketId: 17554
    },
    {
      Title: "[email protected]",
      TimeIn: "2017\/11\/26 9:48",
      TimeOut: "2017\/11\/26 01:45",
      TravelTime: "00:00",
      ProcureTime: "00:00",
      WorkLog: "hgkjhg",
      TicketId: 17555
    }
  ]

  $scope.applySearch = function() {
    for (prop in $scope.userInput) {
      $scope.search[prop] = $scope.userInput[prop];

    }
  };
  
  $scope.deleteData=function(){
            $scope.userInput.Title="";
            $scope.userInput.TimeOut="";
            $scope.userInput.TimeIn="";
            $scope.userInput.TicketId="";
            for(prop in $scope.userInput) {    
                $scope.search[prop] = $scope.userInput[prop];   
            }
         };


  $scope.setOrderProperty = function(propertyName) {
    if ($scope.orderProperty === propertyName) {
      $scope.orderProperty = '-' + propertyName;
    } else if ($scope.orderProperty === '-' + propertyName) {
      $scope.orderProperty = propertyName;
    } else {
      $scope.orderProperty = propertyName;
    }
  };


});

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #f7f7f7;
}

.navbar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 5px;
}


/*
headeer top
*/

.topbar {
  background-color: #212529;
  padding: 0;
}

.topbar .container .row {
  margin: -7px;
  padding: 0;
}

.topbar .container .row .col-md-12 {
  padding: 0;
}

.topbar p {
  margin: 0;
  display: inline-block;
  font-size: 13px;
  color: #f1f6ff;
}

.topbar p>i {
  margin-right: 5px;
}

.topbar p:last-child {
  text-align: right;
}

header .navbar {
  margin-bottom: 0;
}

.topbar li.topbar {
  display: inline;
  padding-right: 18px;
  line-height: 52px;
  transition: all .3s linear;
}

.topbar li.topbar:hover {
  color: #1bbde8;
}

.topbar ul.info i {
  color: #131313;
  font-style: normal;
  margin-right: 8px;
  display: inline-block;
  position: relative;
  top: 4px;
}

.topbar ul.info li {
  float: right;
  padding-left: 30px;
  color: #ffffff;
  font-size: 13px;
  line-height: 44px;
}

.topbar ul.info i span {
  color: #aaa;
  font-size: 13px;
  font-weight: 400;
  line-height: 50px;
  padding-left: 18px;
}

a {
  color: #0a0a0a;
  text-decoration: none;
}

li {
  list-style-type: none;
}

.bg-image-full {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.bg-dark {
  background-color: #222!important;
}

.mx-background-top-linear {
  background: -webkit-linear-gradient(45deg, #d4002e 48%, #1b1e21 48%);
  background: -webkit-linear-gradient(left, #d4002e 48%, #1b1e21 48%);
  background: linear-gradient(45deg, #d4002e 48%, #1b1e21 48%);
}

table {
  font-weight: 400;
}

table,
th,
td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}

th a {
  display: block;
  /* Making the headerlinks 100% width */
  width: 100%;
  float: left;
  /* Making the headerlinks 100% height ??? */
  height: 100%;
  /* doesnt work! */
  min-height: 100%;
}

tr {
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app='app'>


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="bootstrap.min.css">

  <link rel="stylesheet" href="style.css">



</head>


<body>

  <div class="container">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark mx-background-top-linear">
      <div class="container">
        <a class="navbar-brand" href="index.html" style="text-transform: uppercase;"> WorkTimings</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">

          <ul class="navbar-nav ml-auto">

            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                      <span class="sr-only">(current)</span>
                    </a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>


            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>


    <!--filters -->


    <div ng-controller="engsCtrl">
      <h1>Table Sheet</h1>
      <input type='text' ng-model='userInput.Title' placeholder="Search by title" />
              <input type='text' ng-model='userInput.TicketId' placeholder="Search by TicketId" />
              <input type='text' ng-model='userInput.TimeIn' placeholder="Search by Start Date" />
              <input type='text' ng-model='userInput.TimeOut' placeholder="Search by EndDate" />
              <button ng-click="applySearch()">Search</button>
              <button ng-click="deleteData()">Reset</button>
      <table id="example" class="table  table-hover table-light ">
        <thead class="thead-grey" align="center">
          <tr>
            <th class="btn-secondary"><a ng-click="setOrderProperty('Title')">Title &#8645;</a></th>
            <th class="btn-secondary"><a ng-click="setOrderProperty('TimeIn')">TimeIn &#8645;</a></th>
            <th class="btn-secondary"><a ng-click="setOrderProperty('TimeOut')">TimeOut &#8645;</a></th>
            <th class="btn-secondary"><a ng-click="setOrderProperty('TravelTime')">TravelTime &#8645;</a></th>
            <th class="btn-secondary"><a ng-click="setOrderProperty('ProcureTime')">ProcureTime &#8645;</a></th>
            <th class="btn-secondary"><a ng-click="setOrderProperty('WorkLog')">WorkLog &#8645;</a></th>
            <th class="btn-secondary"><a ng-click="setOrderProperty('TicketId')">TicketId &#8645;</a></th>
          </tr>
        </thead>
        <tbody align="center">
          <tr ng-repeat="x in worktime | orderBy : orderProperty | filter:search">
            <th scope="row">{{ x.Title }}</th>
            <td>{{ x.TimeIn }}</td>
            <td>{{ x.TimeOut }}</td>
            <td>{{ x.TravelTime }}</td>
            <td>{{ x.ProcureTime }}</td>
            <td>{{ x.WorkLog }}</td>
            <td>{{ x.TicketId }}</td>



          </tr>

        </tbody>
      </table>




    </div>
  </div>


  <script type="text/javascript" src="angular.js"></script>
  <script type="text/javascript" src="app.js"></script>



</body>



</html>

Blockquote

Solution

try following:

   var app = angular.module('app', []);

app.filter('dateRange', function () {
    return function (items, fromDate, toDate) {
       
        var filtered = [];
        if (fromDate==='' && toDate==='')
            return items;
     
        //here you will have your desired input
        
        var from_date =fromDate!==''? new Date(fromDate):"0001/01/01";
        var to_date = to_date !== '' ? new Date(toDate) : "9999/30/12";
        if (fromDate !== '' && toDate !== '') {
            angular.forEach(items, function (item) {
                var timeIn = new Date(item.TimeIn);
                var timeOut = new Date(item.TimeOut);
                if ((timeIn >= from_date && timeOut <= to_date)) {
                    filtered.push(item);
                }


            });
        }
        if (fromDate !== '' && toDate === '') {
            angular.forEach(items, function (item) {
                var timeIn = new Date(item.TimeIn);
                var timeOut = new Date(item.TimeOut);
                if (timeIn >= from_date) {
                    filtered.push(item);
                }
            });
        }
        if (fromDate === '' && toDate !== '') {
            angular.forEach(items, function (item) {
                var timeIn = new Date(item.TimeIn);
                var timeOut = new Date(item.TimeOut);
                if (timeIn <= to_date) {
                    filtered.push(item);
                }
            });
        }

        return filtered;
    };
});
app.controller('engsCtrl', function ($scope) {
    $scope.orderProperty = "Title";
    $scope.search = {};
    $scope.userInput = {};
    $scope.worktime = [
        {
            Title: "[email protected]" ,
            TimeIn: "2017\/11\/08 00:45" ,
            TimeOut: "2017\/11\/08 01:45" ,
            TravelTime: "01:00" ,
            ProcureTime: "01:00" ,
            WorkLog: "adfadf" ,
            TicketId: 17554
        } ,
        {
            Title: "[email protected]" ,
            TimeIn: "2017\/11\/08 00:45" ,
            TimeOut: "2017\/11\/08 01:45" ,
            TravelTime: "01:00" ,
            ProcureTime: "01:30" ,
            WorkLog: "-" ,
            TicketId: 17554
        } ,
        {
            Title: "[email protected]" ,
            TimeIn: "2017\/11\/08 00:45" ,
            TimeOut: "2017\/11\/08 01:45" ,
            TravelTime: "01:00" ,
            ProcureTime: "01:00" ,
            WorkLog: "-" ,
            TicketId: 175540
        } ,
        {
            Title: "[email protected]" ,
            TimeIn: "2017\/11\/08 00:45" ,
            TimeOut: "2017\/11\/08 01:45" ,
            TravelTime: "01:00" ,
            ProcureTime: "01:00" ,
            WorkLog: "-" ,
            TicketId: 175540
        } ,
        {
            Title: "[email protected]" ,
            TimeIn: "2017\/11\/08 00:45" ,
            TimeOut: "2017\/11\/08 01:45" ,
            TravelTime: "01:00" ,
            ProcureTime: "01:00" ,
            WorkLog: null ,
            TicketId: 175540
        } ,
        {
            Title: "[email protected]" ,
            TimeIn: "2017\/11\/08 00:45" ,
            TimeOut: "2017\/11\/08 01:45" ,
            TravelTime: "01:00" ,
            ProcureTime: "01:00" ,
            WorkLog: null ,
            TicketId: 175540
        } ,
        {
            Title: "[email protected]" ,
            TimeIn: "2017\/11\/21 00:00" ,
            TimeOut: "2017\/11\/21 01:00" ,
            TravelTime: "01:00" ,
            ProcureTime: "01:15" ,
            WorkLog: "-" ,
            TicketId: 17554
        } ,
        {
            Title: "[email protected]" ,
            TimeIn: "2017\/11\/21 10:57" ,
            TimeOut: "2017\/11\/22 10:57" ,
            TravelTime: "00:00" ,
            ProcureTime: "00:00" ,
            WorkLog: "-" ,
            TicketId: 17554
        } ,
        {
            Title: "[email protected]" ,
            TimeIn: "2017\/11\/26 9:48" ,
            TimeOut: "2017\/11\/26 01:45" ,
            TravelTime: "00:00" ,
            ProcureTime: "00:00" ,
            WorkLog: "hgkjhg" ,
            TicketId: 17555
        }
    ];
    $scope.userInput.TimeIn = '';
    $scope.userInput.TimeOut= '';
    $scope.applySearch = function () {
        for (prop in $scope.userInput) {
            $scope.search[prop] = $scope.userInput[prop];
           

        }

        console.log($scope.search);
    };
    $scope.deleteData = function () {
        $scope.userInput.Title = "";
        $scope.userInput.TimeOut = "";
        $scope.userInput.TimeIn = "";
        $scope.userInput.TicketId = "";
        $scope.applySearch();
    }

    $scope.setOrderProperty = function (propertyName) {
        if ($scope.orderProperty === propertyName) {
            $scope.orderProperty = '-' + propertyName;
        } else if ($scope.orderProperty === '-' + propertyName) {
            $scope.orderProperty = propertyName;
        } else {
            $scope.orderProperty = propertyName;
        }
    };


});

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #f7f7f7;
}

.navbar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 5px;
}


/*
headeer top
*/

.topbar {
  background-color: #212529;
  padding: 0;
}

.topbar .container .row {
  margin: -7px;
  padding: 0;
}

.topbar .container .row .col-md-12 {
  padding: 0;
}

.topbar p {
  margin: 0;
  display: inline-block;
  font-size: 13px;
  color: #f1f6ff;
}

.topbar p>i {
  margin-right: 5px;
}

.topbar p:last-child {
  text-align: right;
}

header .navbar {
  margin-bottom: 0;
}

.topbar li.topbar {
  display: inline;
  padding-right: 18px;
  line-height: 52px;
  transition: all .3s linear;
}

.topbar li.topbar:hover {
  color: #1bbde8;
}

.topbar ul.info i {
  color: #131313;
  font-style: normal;
  margin-right: 8px;
  display: inline-block;
  position: relative;
  top: 4px;
}

.topbar ul.info li {
  float: right;
  padding-left: 30px;
  color: #ffffff;
  font-size: 13px;
  line-height: 44px;
}

.topbar ul.info i span {
  color: #aaa;
  font-size: 13px;
  font-weight: 400;
  line-height: 50px;
  padding-left: 18px;
}

a {
  color: #0a0a0a;
  text-decoration: none;
}

li {
  list-style-type: none;
}

.bg-image-full {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.bg-dark {
  background-color: #222!important;
}

.mx-background-top-linear {
  background: -webkit-linear-gradient(45deg, #d4002e 48%, #1b1e21 48%);
  background: -webkit-linear-gradient(left, #d4002e 48%, #1b1e21 48%);
  background: linear-gradient(45deg, #d4002e 48%, #1b1e21 48%);
}

table {
  font-weight: 400;
}

table,
th,
td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}

th a {
  display: block;
  /* Making the headerlinks 100% width */
  width: 100%;
  float: left;
  /* Making the headerlinks 100% height ??? */
  height: 100%;
  /* doesnt work! */
  min-height: 100%;
}

tr {
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app='app'>


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.min.css">

    <link rel="stylesheet" href="style.css">



</head>


<body>

    <div class="container">
        <!-- Navigation -->
        <nav class="navbar navbar-expand-lg navbar-dark mx-background-top-linear">
            <div class="container">
                <a class="navbar-brand" href="index.html" style="text-transform: uppercase;"> WorkTimings</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">

                    <ul class="navbar-nav ml-auto">

                        <li class="nav-item active">
                            <a class="nav-link" href="#">
                                Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#">About</a>
                        </li>


                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>


        <!--filters -->


        <div ng-controller="engsCtrl">
            <h1>Table Sheet</h1>
            <input type='text' ng-model='userInput.Title' placeholder="Search by title" />
            <input type='text' ng-model='userInput.TicketId' placeholder="Search by TicketId" />
            <input type='text' ng-model='userInput.TimeIn' placeholder="Search by Start Date" />
            <input type='text' ng-model='userInput.TimeOut' placeholder="Search by EndDate" />
            
            <button ng-click="deleteData()">Delete</button>
            <table id="example" class="table  table-hover table-light ">
                <thead class="thead-grey" align="center">
                    <tr>
                        <th class="btn-secondary"><a ng-click="setOrderProperty('Title')">Title &#8645;</a></th>
                        <th class="btn-secondary"><a ng-click="setOrderProperty('TimeIn')">TimeIn &#8645;</a></th>
                        <th class="btn-secondary"><a ng-click="setOrderProperty('TimeOut')">TimeOut &#8645;</a></th>
                        <th class="btn-secondary"><a ng-click="setOrderProperty('TravelTime')">TravelTime &#8645;</a></th>
                        <th class="btn-secondary"><a ng-click="setOrderProperty('ProcureTime')">ProcureTime &#8645;</a></th>
                        <th class="btn-secondary"><a ng-click="setOrderProperty('WorkLog')">WorkLog &#8645;</a></th>
                        <th class="btn-secondary"><a ng-click="setOrderProperty('TicketId')">TicketId &#8645;</a></th>
                    </tr>
                </thead>
                <tbody align="center">
                    <tr ng-repeat="x in worktime  | dateRange : userInput.TimeIn : userInput.TimeOut|orderBy : orderProperty | filter:userInput.Title:TravelTime:ProcureTime:WorkLog:TicketId ">
                        <th scope="row">{{ x.Title }}</th>
                        <td>{{ x.TimeIn }}</td>
                        <td>{{ x.TimeOut }}</td>
                        <td>{{ x.TravelTime }}</td>
                        <td>{{ x.ProcureTime }}</td>
                        <td>{{ x.WorkLog }}</td>
                        <td>{{ x.TicketId }}</td>



                    </tr>

                </tbody>
            </table>




        </div>
    </div>


    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="app.js"></script>



</body>



</html>