Input with time validation and transformation. In browsers that do not yet support
the HTML5 time input, a text element will be used. In that case, the text must be entered in a valid ISO-8601
local time format (HH:mm:ss), for example: 14:57:00
. Model must be a Date object. This binding will always output a
Date object to the model of January 1, 1970, or local date new Date(1970, 0, 1, HH, mm, ss)
.
The model must always be a Date object, otherwise Angular will throw an error.
Invalid Date
objects (dates whose getTime()
is NaN
) will be rendered as an empty string.
The timezone to be used to read/write the Date
instance in the model can be defined using
ngModelOptions. By default, this is the timezone of the browser.
<input type="time"
ng-model="string"
[name="string"]
[min="string"]
[max="string"]
[ng-min=""]
[ng-max=""]
[required="string"]
[ng-required="string"]
[ng-change="string"]>
Param | Type | Details |
---|---|---|
ngModel | string |
Assignable angular expression to data-bind to. |
name
(optional)
|
string |
Property name of the form under which the control is published. |
min
(optional)
|
string |
Sets the |
max
(optional)
|
string |
Sets the |
ngMin
(optional)
|
datestring |
Sets the |
ngMax
(optional)
|
datestring |
Sets the |
required
(optional)
|
string |
Sets |
ngRequired
(optional)
|
string |
Adds |
ngChange
(optional)
|
string |
Angular expression to be executed when input changes due to user interaction with the input element. |
<script>
angular.module('timeExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: new Date(1970, 0, 1, 14, 57, 0)
};
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Pick a time between 8am and 5pm:</label>
<input type="time" id="exampleInput" name="input" ng-model="example.value"
placeholder="HH:mm:ss" min="08:00:00" max="17:00:00" required />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.time">
Not a valid date!</span>
</div>
<tt>value = {{example.value | date: "HH:mm:ss"}}</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>
var value = element(by.binding('example.value | date: "HH:mm:ss"'));
var valid = element(by.binding('myForm.input.$valid'));
var input = element(by.model('example.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('14:57:00');
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('23:59:00');
expect(value.getText()).toContain('');
expect(valid.getText()).toContain('myForm.input.$valid = false');
});