尝试验证开始和结束时间不是＆gt;超过1小时。使用角度基本功能进行验证。
还试图拥有日期选择器，但不会因为我在私人网络上而发生。
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.valid = false;
$scope.submit = function(){
$scope.valid = true;
}
$scope.close = function(){
$scope.valid = false;
}
});Trying to validate start and end time shud not be > than 1 hr.USing angular basic functionality for this validation.
Also trying to have date-picker but not happening for me as i am on private network.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>AngularJS Form Validation</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<style type="text/css">
.errortext {
color: red;
}
</style>
</head>
// form start here
<body ng-controller="myController">
<div class="container-fluid">
<div class="row col-md-6 col-sm-6 col-xs-12">
<div class=" form-body">
<form role="form" name="myForm" novalidate>
<div class="form-group">
<label class="control-label "> Gate Open Date </label>
<div class="input-group">
<input name="gateOpenDate" class="form-control" placeholder="YYYY-MM-DD" ng-pattern="/(\d{4})-(\d{2})-(\d{2})/" ng-model="addFlood.gateOpenDate" required autofocus/>
<div class="errortext" ng-show="myForm.gateOpenDate.$dirty && myForm.gateOpenDate.$invalid">
<span ng-show="myForm.gateOpenDate.$error.required">Gate Open Date is required</span>
<span ng-show="myForm.gateOpenDate.$error.pattern">Date Format Must Be DD/MM/YYYY</span>
</div>
<div class="input-group-addon">
<i class="fa fa-calendar"> </i>
</div>
</div>
</div>
//start time
<div class="form-group ">
<label class="control-label "> Start Time </label>
<div class="input-group">
<input name="startTime" class="form-control" placeholder="HH:MM " ng-pattern="/^([01]\d|2[0-3]):?([0-5]\d)$/" min="addFlood.startTime" ng-model="addFlood.startTime" required/>
<div class="errortext" ng-show="myForm.startTime.$dirty && myForm.startTime.$invalid || myForm.endTime.$dirty && addFlood.startTime == addFlood.endTime">
<span ng-show="myForm.startTime.$error.required">Start Time is required</span>
<span ng-show="myForm.startTime.$error.pattern">Invalid Time Format</span>
<span ng-show="myForm.startTime.$error.min">Username must contain atleast 10 characters</span>
</div>
<div class="input-group-addon">
<i class="fa fa-clock-o"> </i>
</div>
</div>
</div>
//end time
<div class="form-group ">
<label class="control-label ">End time </label>
<div class="input-group">
<input name="endTime" class="form-control" placeholder="HH:MM " ng-pattern="/^([01]\d|2[0-3]):?([0-5]\d)$/" ng-max="addFlood.endTime" ng-model="addFlood.endTime" required/>
<div class="errortext" ng-show="myForm.endTime.$dirty && myForm.startTime.$invalid || myForm.endTime.$dirty && addFlood.startTime == addFlood.endTime || myForm.endTime.$dirty && addFlood.startTime-addFlood.endTime !=100">
<span ng-show="myForm.endTime.$error.required">Start Time is required</span>
<span ng-show="myForm.endTime.$error.pattern">Invalid Time Format</span>
<!--<span ng-show="!myForm.endTime.$error.required && addFlood.startTime = addFlood.endTime">Start and end time must not be same.</span>-->
<span ng-show="!myForm.endTime.$error.required && addFlood.endTime.diff(addFlood.startTime, 'hours')">Start and end time must same.</span>
</div>
<div class="input-group-addon">
<i class="fa fa-clock-o"> </i>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label "> Number Of Orders </label>
<input class="form-control" ng-model="addFlood.numberOfOrders" ng-pattern="/[0-9]+/" name="numberOfOrders" placeholder="Order #" required/>
<div class="errortext" ng-show="myForm.numberOfOrders.$dirty && myForm.numberOfOrders.$invalid">
<span ng-show="myForm.numberOfOrders.$error.required">Order Number required</span>
<span ng-show="myForm.numberOfOrders.$error.pattern">Only Numbers are Allowed</span>
</div>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " ng-disabled="myForm.$invalid" ng-click="addSdFloodInfo(addFlood, gatingDetil)" name="submit" type="submit">
Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="angular.js"></script>
</body>
</html>
还试图拥有日期选择器，但不会因为我在私人网络上而发生。
答案 0 :(得分：0)
使用
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
然后使用此方法获得两个时间戳之间的差异：
endTime.diff(startTime, 'hours')
然后将if-else与条件一起使用超过一小时。 这里有startTime和endTime两个变量，应该是用户定义的。
使用纯javascript而不使用momentJs cdn ：
可以用这种方式结束小时差异：function timeDifference(t1,t2) {
var difference = t1.getTime() - t2.getTime();
var hoursDifference = Math.floor(difference/1000/60/60);
difference -= hoursDifference*1000*60*60
}
答案 1 :(得分：0)
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.valid = false;
$scope.submit = function(){
$scope.valid = true;
}
$scope.close = function(){
$scope.valid = false;
}
});
Trying to validate start and end time shud not be > than 1 hr.USing angular basic functionality for this validation.
Also trying to have date-picker but not happening for me as i am on private network.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>AngularJS Form Validation</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<style type="text/css">
.errortext {
color: red;
}
</style>
</head>
// form start here
<body ng-controller="myController">
<div class="container-fluid">
<div class="row col-md-6 col-sm-6 col-xs-12">
<div class=" form-body">
<form role="form" name="myForm" novalidate>
<div class="form-group">
<label class="control-label "> Gate Open Date </label>
<div class="input-group">
<input name="gateOpenDate" class="form-control" placeholder="YYYY-MM-DD" ng-pattern="/(\d{4})-(\d{2})-(\d{2})/" ng-model="addFlood.gateOpenDate" required autofocus/>
<div class="errortext" ng-show="myForm.gateOpenDate.$dirty && myForm.gateOpenDate.$invalid">
<span ng-show="myForm.gateOpenDate.$error.required">Gate Open Date is required</span>
<span ng-show="myForm.gateOpenDate.$error.pattern">Date Format Must Be DD/MM/YYYY</span>
</div>
<div class="input-group-addon">
<i class="fa fa-calendar"> </i>
</div>
</div>
</div>
<div class="form-group " >
<label class="control-label "> Start Time </label>
<div class="input-group">
<input type="time" name="startTime" class="form-control" placeholder="HH:MM 24h format" ng-model="addFlood.startTime" required/>
<div class="errortext" ng-show="myForm.startTime.$dirty && myForm.startTime.$invalid">
<span ng-show="myForm.startTime.$error.required">Start Time is required</span>
<span ng-show="myForm.startTime.$error.time">Invalid Time Format</span>
</div>
<div class="input-group-addon">
<i class="fa fa-clock-o"> </i>
</div>
</div>
</div>
<div class="form-group " >
<label class="control-label ">End time </label>
<div class="input-group">
<input type="time" name="endTime" class="form-control" placeholder="HH:MM 24h format" ng-model="addFlood.endTime" required/>
<div class="errortext" ng-show="myForm.endTime.$dirty && myForm.endTime.$invalid || myForm.endTime.$dirty && ((addFlood.endTime-addFlood.startTime)/(1000*60*60) >1)">
<span ng-show="myForm.endTime.$error.required">End Time is required</span>
<span ng-show="myForm.endTime.$error.time">Invalid Time Format</span>
<span ng-show="!myForm.endTime.$error.required && ((addFlood.endTime-addFlood.startTime)/(1000*60*60)>1)">Flood interval is greater than 1 Hr</span>
</div>
<div class="input-group-addon">
<i class="fa fa-clock-o"> </i>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label "> Number Of Orders </label>
<input class="form-control" ng-model="addFlood.numberOfOrders" ng-pattern="/[0-9]+/" name="numberOfOrders" placeholder="Order #" required/>
<div class="errortext" ng-show="myForm.numberOfOrders.$dirty && myForm.numberOfOrders.$invalid">
<span ng-show="myForm.numberOfOrders.$error.required">Order Number required</span>
<span ng-show="myForm.numberOfOrders.$error.pattern">Only Numbers are Allowed</span>
</div>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " ng-disabled="myForm.$invalid"
ng-click="addSdFloodInfo(addFlood, gatingDetil)" name="submit" type="submit">
Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="angular.js"></script>
</body>
</html>