3

Estou com um problema para formatar a hora que aparece na View, ela esta vindo da seguinte forma: inserir a descrição da imagem aqui

Porém gostaria que ela fosse exibida no formato "hh:mm:ss". O código html é o seguinte:

<input type="time" class="form-control" ng-disabled="!salvo" required ng-model="notaServico.dataEmissao" />

Como faço para formatar ela no angularJS ou até mesmo no próprio HTML?

Obrigado.

5
  • Qual versão do angular você está utilizando?
    – Sorack
    28/08/2017 às 14:32
  • 2
    Você precisa utilizar os filtros do Angular, veja nessa resposta que explico como fazer. No seu caso você precisará usar o formato HH:mm:ss. 28/08/2017 às 14:35
  • Veja na documentação(em inglês) todos os formatos que você pode utilizar. 28/08/2017 às 14:36
  • @miltoncamara não é duplicata. Ele quer formatar a hora dentro de um input. Fora que não é uma data completa.
    – Sorack
    28/08/2017 às 14:49
  • @miltoncamara eu havia olhado este post, porém no meu caso eu teria que formatar esta hora em um input, eu testei a forma deste post porém só funcionou com label, oque não é meu caso rs
    – Brayan
    28/08/2017 às 14:51

2 Respostas 2

6

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 filterdo 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>

5
  • 2
    Legal sua resposta. Mas como ela responde a pergunta do AP? Como é possível aplicar isso num input?
    – Jéf Bueno
    28/08/2017 às 14:40
  • Ah pois é.. esqueci dessa parte.. vou editar. :) 28/08/2017 às 14:41
  • @LINQ acho que agora está respondendo a dúvida do AP. 28/08/2017 às 14:52
  • 2
    Uh, ficou ótimo.
    – Jéf Bueno
    28/08/2017 às 14:53
  • 1
    Obrigado, funcionou :D
    – Brayan
    28/08/2017 às 16:44
0

Tenta esse código (javascript):

function time_format(d) {
    hours = format_two_digits(d.getHours());
    minutes = format_two_digits(d.getMinutes());
    seconds = format_two_digits(d.getSeconds());
    return hours + ":" + minutes + ":" + seconds;
}

function format_two_digits(n) {
    return n < 10 ? '0' + n : n;
}

Já utilizei uma vez, encontrei nessa resposta.

Adicionado após comentário

Podes chamar a formatação do campo no onchange do input:

$("#id_input").on("change", function(){
    $(this).val(time_format($this).val());
});
2
  • 2
    Legal sua resposta. Mas como ela responde a pergunta do AP? Como é possível aplicar isso num input?
    – Jéf Bueno
    28/08/2017 às 14:40
  • Sua reposta conflita com a utilização do AngularJS. Em adição você está utilizando JQuery, o que não está especificado na pergunta do AP.
    – Sorack
    28/08/2017 às 14:50

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .