©
This document uses PHP Chinese website manual Release
日期时间输入的验证和转换。目前的浏览器还不支持HTML5的日期输入控件,所以将使用文本输入。 在这种情况下,输入的文本必须符合ISO-8601的本地日期时间格式(yyyy-MM-ddTHH:mm)的校验规范,例如:2010-12-28T14:57
。 模型必须永远是一个Date对象。
<input Type="dateTimeLocal"
ng-model=""
[name=""]
[min=""]
[max=""]
[required=""]
[ng-required=""]
[ng-change=""]>
参数 | 类型 | 详述 |
---|---|---|
ngModel | string | 声明用于数据绑定的Angular表达式。 |
name (可选)
|
string | 发布到表单下的控件的属性名称。 |
min
(可选)
|
string | 当输入的值小于 |
max
(可选)
|
string | 当输入的值大于 |
required
(可选)
|
string | 如果未输入值就设置 |
ngRequired
(可选)
|
string | 当ngRequired表达式等于true时,添加 |
ngChange
(可选)
|
string | Angular表达式,当输入元素通过用户交互方式发生输入变化时会执行这个表达式。 |
<script>
angular.module('dateExample', [])
.controller('DateController', ['$scope', Function($scope) {
$scope.value = new Date(2010, 11, 28, 14, 57);
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
Pick a date between in 2013:
<input Type="datetime-local" id="exampleInput" name="input" ng-model="value"
placeholder="yyyy-MM-ddTHH:mm" min="2001-01-01T00:00" max="2013-12-31T00:00" required />
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.datetimelocal">
Not a valid date!</span>
<tt>value = {{value | date: "yyyy-MM-ddTHH:mm"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
protractor.js
var value = element(by.binding('value | date: "yyyy-MM-ddTHH:mm"'));
var valid = element(by.binding('myForm.input.$valid'));
var input = element(by.model('value'));
// currently protractor/webdriver does not support
// sending keys to all known HTML5 input controls
// for various browsers (https://github.com/angular/protractor/issues/562).
Function setInput(val) {
// set the value of the element and force validation.
var scr = "var ipt = document.getElementById('exampleInput'); " +
"ipt.value = '" + val + "';" +
"angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('" + val + "'); });";
browser.executeScript(scr);}
it('should initialize to model', Function() {
expect(value.getText()).toContain('2010-12-28T14:57');
expect(valid.getText()).toContain('myForm.input.$valid = true');});
it('should be invalid if empty', Function() {
setInput('');
expect(value.getText()).toEqual('value =');
expect(valid.getText()).toContain('myForm.input.$valid = false');});
it('should be invalid if over max', Function() {
setInput('2015-01-01T23:59');
expect(value.getText()).toContain('');
expect(valid.getText()).toContain('myForm.input.$valid = false');});