Pular para o conteúdo principal

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 datehttps://docs.angularjs.org/api/ng/filter/date.

Até a próxima.

Referências


Código


Comentários

Postagens mais visitadas deste blog

Utilizando LocalDate, LocalDateTime e LocalTime na Prática

Tudo bem pessoal, hoje iremos avaliar e analisar operações de manipulação de Datas envolvendo a JavaTime API introduzida no Java 8.

Exemplos da java.time API
Já se passaram alguns anos desde o lançamento do Java 8 e mesmo após este período, há empresas que desconhecem o poder da java.time API, esta foi uma nova API de datas introduzida no Java 8 visando resolver problemas que tínhamos com as velhas classes Date e Calendar.

Vamos mostrar vários exemplos práticos do uso da API:
Criação de objetos No exemplo abaixo, estamos criando os objetos para manipulação de datas, perceba que temos 3 tipos, sendo LocalDate para manipular datas, LocalDateTime para manipular data/hora e LocalTime para horas:
LocalDate localDate = LocalDate.now(); LocalDateTime localDateTime = LocalDateTime.now(); LocalTime localTime = LocalTime.now();
Utilizando formatação Aqui realizamos a operação de formatação, perceba que não foi necessário utilizar a classe SimpleDateFormat, que usaríamos em conjunto com D…

Lendo e Manipulando arquivos CSV com Java

Olá hoje veremos como realizar a leitura e manipulação de arquivos CSV com Java, mostrando que as novas versões da plataforma Java deixaram algumas tarefas simples de serem realizadas.

Exemplo de Arquivo Hoje em dia é comum ao realizar integrações ou carga de dados o uso de arquivos CSV, isto porque, este arquivo possui uma estrutura de fácil entendimento e simples de manipular na maioria das plataformas de desenvolvimento.

Para realizar a leitura dos dados vamos manipular um arquivo com as seguintes colunas: namecpfagephone address:

name;cpf;age;phone;address caio;123456789;20;1145223643;AvenidaPaulista vinicius;147852369;18;1125253625;AvenidaManoel sandra;963258741;30;1174587858;RuaTeixeira regina;125478522;40;1145254536;RuaFernando fernando;785245563;42;1145253669;RuaPereira augusto;456123014;50;1125363633;AvenidaPaulinia maria;456123789;10;1125455525;AvenidaNossaSenhora
Para representar os dados em objetos Java iremos utilizar a seguinte classe:

importlombok.AllArgsConstruc…

Versionamento de Banco Dados com Flyway

Olá pessoal, hoje iremos analisar e aprender como realizar o versionamento e gerenciamento das bases de dados relacionais utilizando o framework Flyway.

Versionamento de Banco Dados Ao trabalhar com desenvolvimento de sistemas é comum realizarmos o versionamento, isso porque uma aplicação pode necessitar de correções, novas funcionalidades e evoluções, onde para garantir a compatibilidade e cuidar do seu ciclo de vida, geramos versões onde é especificado quais itens estão presentes em cada release.
Vamos imaginar seguinte cenário: Sistema ERP1.0.0: Entrega dos módulos Financeiro e RH;1.1.0: Entrega do módulo Contas a Receber. Perceba que a ideia é controlar o que cada versão possui de diferente, e para controlar essas mudanças no lado da aplicação existem várias técnicas e ferramentas, mas e para controlar as mudanças no lado do Banco de dados ? 
Para isso podemos utilizar ferramentas de versionamento que ajudam a realizar este controle, a ferramenta que iremos utilizar é o Flyway.
Con…