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: "basil@email.com",
TimeIn: "2017\/11\/08 00:45",
TimeOut: "2017\/11\/08 01:45",
TravelTime: "01:00",
ProcureTime: "01:00",
WorkLog: "adfadf",
TicketId: 17554
},
{
Title: "Jake@email.com",
TimeIn: "2017\/11\/08 00:45",
TimeOut: "2017\/11\/08 01:45",
TravelTime: "01:00",
ProcureTime: "01:30",
WorkLog: "-",
TicketId: 17554
},
{
Title: "Jessica@email.com",
TimeIn: "2017\/11\/08 00:45",
TimeOut: "2017\/11\/08 01:45",
TravelTime: "01:00",
ProcureTime: "01:00",
WorkLog: "-",
TicketId: 175540
},
{
Title: "Sulaiman@email.com",
TimeIn: "2017\/11\/08 00:45",
TimeOut: "2017\/11\/08 01:45",
TravelTime: "01:00",
ProcureTime: "01:00",
WorkLog: "-",
TicketId: 175540
},
{
Title: "Mohammed@email.com",
TimeIn: "2017\/11\/08 00:45",
TimeOut: "2017\/11\/08 01:45",
TravelTime: "01:00",
ProcureTime: "01:00",
WorkLog: null,
TicketId: 175540
},
{
Title: "Ann@email.com",
TimeIn: "2017\/11\/08 00:45",
TimeOut: "2017\/11\/08 01:45",
TravelTime: "01:00",
ProcureTime: "01:00",
WorkLog: null,
TicketId: 175540
},
{
Title: "Ahmed@email.com",
TimeIn: "2017\/11\/21 00:00",
TimeOut: "2017\/11\/21 01:00",
TravelTime: "01:00",
ProcureTime: "01:15",
WorkLog: "-",
TicketId: 17554
},
{
Title: "Sarah@email.com",
TimeIn: "2017\/11\/21 10:57",
TimeOut: "2017\/11\/22 10:57",
TravelTime: "00:00",
ProcureTime: "00:00",
WorkLog: "-",
TicketId: 17554
},
{
Title: "Dalal@email.com",
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 ⇅</a></th>
<th class="btn-secondary"><a ng-click="setOrderProperty('TimeIn')">TimeIn ⇅</a></th>
<th class="btn-secondary"><a ng-click="setOrderProperty('TimeOut')">TimeOut ⇅</a></th>
<th class="btn-secondary"><a ng-click="setOrderProperty('TravelTime')">TravelTime ⇅</a></th>
<th class="btn-secondary"><a ng-click="setOrderProperty('ProcureTime')">ProcureTime ⇅</a></th>
<th class="btn-secondary"><a ng-click="setOrderProperty('WorkLog')">WorkLog ⇅</a></th>
<th class="btn-secondary"><a ng-click="setOrderProperty('TicketId')">TicketId ⇅</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
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: "basil@email.com" ,
TimeIn: "2017\/11\/08 00:45" ,
TimeOut: "2017\/11\/08 01:45" ,
TravelTime: "01:00" ,
ProcureTime: "01:00" ,
WorkLog: "adfadf" ,
TicketId: 17554
} ,
{
Title: "Jake@email.com" ,
TimeIn: "2017\/11\/08 00:45" ,
TimeOut: "2017\/11\/08 01:45" ,
TravelTime: "01:00" ,
ProcureTime: "01:30" ,
WorkLog: "-" ,
TicketId: 17554
} ,
{
Title: "Jessica@email.com" ,
TimeIn: "2017\/11\/08 00:45" ,
TimeOut: "2017\/11\/08 01:45" ,
TravelTime: "01:00" ,
ProcureTime: "01:00" ,
WorkLog: "-" ,
TicketId: 175540
} ,
{
Title: "Sulaiman@email.com" ,
TimeIn: "2017\/11\/08 00:45" ,
TimeOut: "2017\/11\/08 01:45" ,
TravelTime: "01:00" ,
ProcureTime: "01:00" ,
WorkLog: "-" ,
TicketId: 175540
} ,
{
Title: "Mohammed@email.com" ,
TimeIn: "2017\/11\/08 00:45" ,
TimeOut: "2017\/11\/08 01:45" ,
TravelTime: "01:00" ,
ProcureTime: "01:00" ,
WorkLog: null ,
TicketId: 175540
} ,
{
Title: "Ann@email.com" ,
TimeIn: "2017\/11\/08 00:45" ,
TimeOut: "2017\/11\/08 01:45" ,
TravelTime: "01:00" ,
ProcureTime: "01:00" ,
WorkLog: null ,
TicketId: 175540
} ,
{
Title: "Ahmed@email.com" ,
TimeIn: "2017\/11\/21 00:00" ,
TimeOut: "2017\/11\/21 01:00" ,
TravelTime: "01:00" ,
ProcureTime: "01:15" ,
WorkLog: "-" ,
TicketId: 17554
} ,
{
Title: "Sarah@email.com" ,
TimeIn: "2017\/11\/21 10:57" ,
TimeOut: "2017\/11\/22 10:57" ,
TravelTime: "00:00" ,
ProcureTime: "00:00" ,
WorkLog: "-" ,
TicketId: 17554
} ,
{
Title: "Dalal@email.com" ,
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 ⇅</a></th>
<th class="btn-secondary"><a ng-click="setOrderProperty('TimeIn')">TimeIn ⇅</a></th>
<th class="btn-secondary"><a ng-click="setOrderProperty('TimeOut')">TimeOut ⇅</a></th>
<th class="btn-secondary"><a ng-click="setOrderProperty('TravelTime')">TravelTime ⇅</a></th>
<th class="btn-secondary"><a ng-click="setOrderProperty('ProcureTime')">ProcureTime ⇅</a></th>
<th class="btn-secondary"><a ng-click="setOrderProperty('WorkLog')">WorkLog ⇅</a></th>
<th class="btn-secondary"><a ng-click="setOrderProperty('TicketId')">TicketId ⇅</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>