Improve this Doc View Source

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: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.

## Directive Info

- This directive executes at priority level 0.

## Usage

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

### Arguments

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 `min` validation error key if the value entered is less than `min`. This must be a valid ISO time format (HH:mm:ss). You can also use interpolation inside this attribute (e.g. `min="{{minTime | date:'HH:mm:ss'}}"`). Note that `min` will also add native HTML5 constraint validation.
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:ss). You can also use interpolation inside this attribute (e.g. `max="{{maxTime | date:'HH:mm:ss'}}"`). Note that `max` will also add native HTML5 constraint validation.
ngMin (optional) | date string | Sets the `min` validation constraint to the Date / ISO time string the `ngMin` expression evaluates to. Note that it does not set the `min` attribute.
ngMax (optional) | date string | Sets the `max` validation constraint to the Date / ISO time string the `ngMax` expression evaluates to. Note that it does not set the `max` attribute.
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

Edit in Plunker

    <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 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');
    });