AngularJS Input Type Time

The AngularJS input types are HTML input element control and used togather with ng-model directive. AngularJS input type Time can be decorate with various AngularJS arguments like name,ng-min,ng-max,ng-required and ng-change.

Syntax

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

AngularJS Input Type Time Arguments

Here is a list of AngularJS Input Type Time Arguments.

Directives	Description
ng-model	AngularJS expression to bind the text.
name (optional)	Name of the control input control.
ng-min (optional)	AngularJS expression sets the min validation constraint to the text.
ng-max (optional)	AngularJS expression sets the max validation constraint to the text.
required (optional)	Validate input type text is required.
ng-required (optional)	AngularJS expression ng-required expression evaluates to true.
ng-change (optional)	AngularJS expression to be executed when input value changes.

AngularJS Input Type Time Example

<!DOCTYPE html>    
<html>    
<head> <!-- www.techstrikers.com -->    
<title>AngularJS Input Type Time</title>    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>     
   <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>    
<script>    
  var app = angular.module('timeInputExample', [])    
     app.run(function($rootScope){    
      $rootScope.angular = angular;    
    })    
     app.controller('TimeController', ['$scope', function($scope) {    
       $scope.example = {    
         value: new Date(2015, 10, 10, 14, 57, 0)
         };
     }]);    
</script>    
</head>    
<body style="background-color:#DDE4E9;">    
  <fieldset style="background-color:#DDE4E9;">      
    <legend>AngulerJS Input Type Time Example</legend>      
<div ng-app="timeInputExample">    
    <form name="myForm" ng-controller="TimeController">    
       <label for="exampleInput">Select a Date</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 />    
        <p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;"     
        ng-if='!myForm.input.$valid'>Select valid time</p>    
        <p style="font-family:Arial;color:#ffffff;background:blue;padding:3px;width:350px;"     
        ng-if='myForm.$error.required'>Time is required</p>    
    </form>    
</div>    
      </fieldset>     
</body>    
</html>

Above example will produce following output