AngularJS - Formatando Datas com o Filter Date

Olá pessoal, continuando a série sobre AngularJS, hoje iremos analisar como podemos formatar datas vindas do back-end.

Formatação de Datas e Internacionalização

É muito comum nos devolvermos sistemas que necessitam trabalhar com diferentes formatos de datas e valores, esta tarefa geralmente trás algumas dificuldades tanto para o lado back-end como o front-end, é necessário tratar a forma de armazenar essas informações, e também a forma de exibi-las.

O processo exibição, tem que tratar algumas variáveis ainda um pouco mais complexas, como por exemplo:

Exibir a data de acordo com o idioma escolhido;
Exibir em formatos mais complexos de acordo com lógicas de negócio.

AngularJS e o Filter Date

Com AngularJS formatar as datas a serem exibidas é algo bem simples, pois o framework disponibiliza um filter que ajuda a realizar a formatação de um informação apenas invocando o filter date.

Vamos analisar o exemplo abaixo da utilização do filter date:

1- Código html com o uso do filter date:

<!DOCTYPE html>
<html data-ng-app="app">
   <head>
      <title>AngularJS - Formatando Datas</title>
      <link rel="stylesheet" href="../resources/css/bootstrap.min.css" />
   </head>
   <body>
    <table class="table table-bordered" data-ng-controller="appCtrl as ctrl">
     <thead>
      <tr>
       <th>Formato (dd/MM/yyyy HH:mm:ss)</th>
       <th>Formato 2 (Data completa)</th>
       <th>Formato 3 (Horário)</th>
       <th>Formato 4 (yyyy-MM-dd)</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <th>{{ctrl.data | date:"dd/MM/yyyy HH:mm:ss"}}</th>
       <th>{{ctrl.data | date:"fullDate"}}</th>
       <th>{{ctrl.data | date:"HH:mm:ss"}}</th>
       <th>{{ctrl.data | date:"yyyy-MM-dd"}}</th>
      </tr>
     </tbody>
    </table>
    <script  type="text/javascript" src="../resources/js/angular.min.js"></script>
    <script type="text/javascript" src="app.ctrl.js"></script>
   </body>
</html>

2- Código JS com a criação do controller:

(function() {
    'use strict';
    
    angular.module("app",[]);

    angular.module("app").controller("appCtrl", function(){
     
     var self = this;
     
     self.data = new Date();
    });
})();

A parte de formatação de datas com AngularJS é muita ampla e existem diversos formatos que podem ser utilizados, para mais detalhes a documentação oficial possui diversos exemplos do uso do filter date: https://docs.angularjs.org/api/ng/filter/date.

Até a próxima.

Referências

https://docs.angularjs.org/api/ng/filter/date

Código

Código de Exemplo - Formatando Datas

Caio Vinicius

Pesquisar este blog