gpt4 book ai didi

angularjs - 尝试使用 AngularJS 显示两个日期之间的结果

转载 作者:行者123 更新时间:2023-12-02 04:32:22 26 4
gpt4 key购买 nike

我正在尝试根据标题、TicketId、日期范围(从到)进行搜索

并非所有搜索输入都需要填写。

如果一个人只输入第一个日期,它会返回那个日期的输出如果输入了两个日期,那么它将打印两个日期之间的所有结果

忽略 CSS 文件。我添加它是为了向您展示它的外观

此外,如何添加重置按钮以删除输入中写入的所有数据?

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 &#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

最佳答案

尝试以下操作:

   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 &#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>

关于angularjs - 尝试使用 AngularJS 显示两个日期之间的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47494969/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com