Resposta adaptada de: como-formatar-uma-data-no-formato-dd-mm-yyyy
Utilize os filtros do AngularJS
Para formatar as datas no Angular, existe o Angular Filter que é muito útil e fácil de usar, seja na view
ou nos controllers
. O filter
ainda pode ser usado para formatar qualquer tipo de objeto. Para data existem várias combinações possíveis.
Como usar filters?
No código javascript (Diretivas, controllers, etc)
$filter('filter')(array, expression, comparator)
Como formatar horas?
Você pode converter seu objeto do tipo Date em qualquer string
baseado na configurações, veja alguns exemplos:
HH
hora com dois dígitos (00-23) - 24 horas
H
hora com um dígito (0-23) - 24 horas
hh
hora com dois dígitos (01-12) - 12 horas
h
hora com um dígito (1-12) - 12 horas
mm
minutos com dois dígitos (00-59)
m
minutos com um dígito (0-59)
ss
segundos com dois dígitos (00-59)
s
segundos com um dígito (0-59)
- veja a lista completa na documentação do Angular
Como aplicar isso no seu input?
Você deve injetar no seu controller o serviço filter
do angular, e então formatar o valor com o formato que você precisa.
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>
<div ng-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>
HH:mm:ss
.input
. Fora que não é uma data completa.