AngularJS: API: ng/directive/input[time]


input[time]

  1. - input in module ng

Input with time validation and transformation. In browsers that do not yet support the HTML5 date 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), for example: 14:57. Model must be a Date object. This binding will always output a Date object to the model of January 1, 1900, or local date new Date(0, 0, 1, HH, mm).

Directive Info

  • This directive executes at priority level 0.

Usage

<input type="time"
       ng-model=""
       [name=""]
       [min=""]
       [max=""]
       [required=""]
       [ng-required=""]
       [ng-change=""]>

Arguments

ParamTypeDetails
ngModelstring

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 min validation error key if the value entered is less than min. This must be a valid ISO time format (HH:mm).

max
(optional)
string

Sets the max validation error key if the value entered is greater than max. This must be a valid ISO time format (HH:mm).

required
(optional)
string

Sets required validation error key if the value is not entered.

ngRequired
(optional)
string

Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.

ngChange
(optional)
string

Angular expression to be executed when input changes due to user interaction with the input element.

Example

index.html
<script>
 angular.module('timeExample', [])
   .controller('DateController', ['$scope', function($scope) {
     $scope.value = new Date(0, 0, 1, 14, 57);
   }]);</script><form name="myForm" ng-controller="DateController as dateCtrl">
   Pick a between 8am and 5pm:
   <input type="time" id="exampleInput" name="input" ng-model="value"
       placeholder="HH:mm" min="08:00" max="17:00" required />
   <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>
   <tt>value = {{value | date: "HH: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: "HH: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('14: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('23:59');
  expect(value.getText()).toContain('');
  expect(valid.getText()).toContain('myForm.input.$valid = false');});