Adapted answer from: how-to-format-one -data-in-format-dd-mm-yyyy
Use AngularJS filters
To format Angular dates, there is Angular Filter that is very useful and easy to use , either in view
or controllers
. filter
can still be used to format any type of object. For date there are several possible combinations.
How to use filters?
In the javascript code (Directives, controllers, etc.)
$filter('filter')(array, expression, comparator)
How to format hours?
You can convert your Date object to any string
based on settings, here are some examples:
-
HH
hour with two digits (00-23) - 24 hours
-
H
hour with a digit (0-23) - 24 hours
-
hh
hour with two digits (01-12) - 12 hours
-
h
hour with one digit (1-12) - 12 hours
-
mm
minutes with two digits (00-59)
-
m
minutes with a digit (0-59)
-
ss
seconds with two digits (00-59)
-
s
seconds with one digit (0-59)
- See the full list at Angular documentation
How to apply this to your input?
You should inject the filter
of angular service into your controller, and then format the value in the format you need.
angular
.module('myApp', [])
.controller('myController', myController);
myController.$inject = ['$scope', '$filter'];
function myController($scope, $filter) {
var dataHora = new Date();
$scope.hora = dataHora;
$scope.horaFormatada = $filter('date')(dataHora, 'HH:mm:ss');
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="myApp" ng-controller="myController">
<label>Hora sem formato</label><br />
<input type="time" ng-model="hora" /><br />
<label>Hora formatada</label><br />
<input type="time" ng-model="horaFormatada" />
</div>