in AngularJS 1.5 I have a form with an input field of type "time". It works, but the time shown should be HH:mm - without seconds, etc.
Chrome does this by default, but Firefox and Internet Explorer show with seconds and milliseconds (e.g. "14:56:00.000" instead of "14:56").
How can we show the required time format in all browsers?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-time-input-directive-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="timeExample">
<script>
angular.module('timeExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: new Date(1970, 0, 1, 14, 56)
};
}]);
</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" min="08:00" max="17: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>
</body>
</html>Thank you!
Firefox and IE don't support <input type="time">, it's browser dependent. See this link for more info on W3. So your input field will not be able to display it the same way as in Chrome.
An alternative is to use uib-timepickerfrom angular-ui or try one from jquery like webshim.