twitter-bootstrap ui-bootstrap 日期选择器和验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24638427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ui-bootstrap date picker and validation
提问by DeborahK
I set up a date picker as shown below. If I put in an invalid date, I always see the "Availability Date is required" message instead of the "Enter a valid date" message. Anyone see what is wrong here?
我设置了一个日期选择器，如下所示。如果我输入了无效日期，我总是会看到“需要可用日期”消息，而不是“输入有效日期”消息。有人看到这里有什么问题吗？
<div class="form-group" ng-class="{'has-error': productForm.inputAvailabilityDate.$invalid && productForm.inputAvailabilityDate.$dirty}">
<label class="col-md-2 control-label" for="inputAvailabilityDate">Availability</label>
<div class="col-md-4">
<div class="input-group">
<input type="date"
id="inputAvailabilityDate"
name="inputAvailabilityDate"
class="form-control"
data-datepicker-popup="MM/dd/yyyy"
ng-model="vm.product.releaseDate"
data-is-open="vm.opened"
data-show-weeks="false"
required />
<span class="input-group-btn">
<button type="button"
class="btn btn-default"
ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
</div>
<span class="help-block text-danger" ng-show="productForm.inputAvailabilityDate.$invalid && productForm.inputAvailabilityDate.$dirty">
<span ng-show="productForm.inputAvailabilityDate.$error.required">
Availability Date is required
</span>
<span class="help-block text-danger" ng-show="!productForm.inputAvailabilityDate.$error.required">
Enter a valid date.
</span>
</span>
</div>
Thanks!
谢谢！
回答by Sebastian
As you can see in this little plnkr example, that you can not show "Enter a valid date", because your expression is not valid!
正如您在这个小 plnkr 示例中所见，您无法显示 "Enter a valid date"，因为您的表达式无效！
There must be productForm.inputAvailabilityDate.$invalid && productForm.inputAvailabilityDate.$dirty && !productForm.inputAvailabilityDate.$error.required== true to show the Message. But if there is a invalid date the model is set to undefined! Thats because datepicker do not set the date if the date is invalid.
必须有productForm.inputAvailabilityDate.$invalid && productForm.inputAvailabilityDate.$dirty && !productForm.inputAvailabilityDate.$error.required== true 才能显示消息。但如果日期无效，模型将设置为未定义！那是因为如果日期无效，datepicker 不会设置日期。
Here you can see a example how the "Enter a valid date" message will show.
在这里，您可以看到“输入有效日期”消息将如何显示的示例。
Code-behind:
代码隐藏：
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctrl', function ($scope, $timeout) {
$scope.vm = {
product: {
releaseDate: new Date()
}
};
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
});
HTML-Code:
HTML代码：
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="container">
<div class="row">
<div class="col-md-12">
<form name="productForm" novalidate>
<div class="form-horizontal">
<span class="input-group">
<input type="date" id="inputAvailabilityDate" name="inputAvailabilityDate"
class="form-control" data-datepicker-popup="MM/dd/yyyy"
ng-model="vm.product.releaseDate" data-is-open="opened"
data-show-weeks="false" required />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-time"></i>
</button>
</span>
</span>
</div>
<span class="help-block text-danger" ng-show="productForm.inputAvailabilityDate.$invalid &&
productForm.inputAvailabilityDate.$dirty">
<span ng-show="productForm.inputAvailabilityDate.$error.required">
Availability Date is required
</span>
<span class="help-block text-danger" ng-show="productForm.inputAvailabilityDate.$invalid &&
productForm.inputAvailabilityDate.$dirty">
Enter a valid date.
</span>
</span>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
vm: {{vm|json}}
</div>
</div>
<div class="row">
<div class="col-md-12">
productForm: {{productForm|json}}
<br>productForm.inputAvailabilityDate.$valid: {{productForm.inputAvailabilityDate.$valid}}
<br>productForm.inputAvailabilityDate.$error: {{productForm.inputAvailabilityDate.$error|json}}
<br>productForm.inputAvailabilityDate.$dirty: {{productForm.inputAvailabilityDate.$dirty}}
<br>productForm.inputAvailabilityDate.$invalid: {{productForm.inputAvailabilityDate.$invalid}}
</div>
</div>
</div>
</body>
</html>
