Home
Run >
<!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>