Format Angularjs date

Asked

Viewed 2,116 times

3

I have a problem to format the time that appears in the View, it is coming in the following way: inserir a descrição da imagem aqui

However, I would like it to be displayed in the "hh:mm:ss" format. The html code is as follows:: 

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

How do I format it in Angularjs or even in HTML itself?

Thank you.

javascript angularjs

  • Which version of the angle you are using?

  • 2

    You need to use the Angular filters, see in that reply I explain how to do it. In your case you will need to use the format HH:mm:ss.

  • See on documentation (in English) all formats you can use.

  • @miltoncamara is not duplicate. He wants to format the hour within a input. Plus it’s not a full date.

  • @miltoncamara I had looked at this post, but in my case I would have to format this time in an input, I tested the shape of this post but only worked with label, what is not my case rs

2 answers

6


Response adapted from: how-to-format-a-date-in-format-dd-mm-yyyy

Use the Angularjs filters

To format dates in Angular, there is the Angular Filter which is very useful and easy to use, whether in the view or us controllers. The filter can still be used to format any type of object. For date there are several possible combinations.

How to use Filters?

In javascript code (Directives, controllers, etc)

$filter('filter')(array, expression, comparator)

How to format hours?

You can convert your Date type object into any string based on settings, see some examples:

  • HH two-digit hour (00-23) - 24 hours
  • H hour with one digit (0-23) - 24 hours
  • hh hour with two digits (01-12) - 12 hours
  • h hour with one digit (1-12) - 12 hours
  • mm two-digit minutes (00-59)
  • m minutes with one digit (0-59)
  • ss two-digit seconds (00-59)
  • s seconds with one digit (0-59)
  • see the full list on angular documentation

How to apply this to your input?

You must inject the service into your controller filterangular, and then format the value with 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>
<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>

  • 2

    Cool your answer. But how does it answer the AP question? How do you apply this to an input?

  • Oh yeah. I forgot about that part. I’ll edit it out.. :)

  • @LINQ I think he’s now answering AP’s question.

  • 2

    Uh, it looks great.

  • 1

    Thanks, it worked :D

0

Try that code (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;
}

I used it once, I found it in that reply.

Added after comment

You can call the field formatting in onchange of input:

$("#id_input").on("change", function(){
    $(this).val(time_format($this).val());
});
  • 2

    Cool your answer. But how does it answer the AP question? How do you apply this to an input?

  • Its response conflicts with the use of AngularJS. In addition you are using JQuery, what is not specified in the AP question.

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.