Como Formatar Data em JavaScript do Jeito Fácil

Mais um artigo bem legal da série sobre formatações e máscaras. Se você ainda não conhece os outros artigos, acesse;

Formatar moeda, dinheiro com JavaScript do jeito fácil.
Como formatar campos de CPF, CEP, Telefone e moeda com jQuery (jMask)

Vamos ver neste artigo várias formas de converter e formatar datas com JavaScript

1. Data Corrente em Formato Brasileiro.
2. Formatar Data de um Input Date.
3. Formatar Data de resposta Ajax, XML, JSon ou API.

1. Data Corrente em Formato Brasileiro.

Se você precisa capturar a data atua com JavaScript e formatá-la para o formato nacional Brasileiro, a melhor forma de fazer isso é usando o método toLocaleDateString("pt-BR");

Exemplo:

Data Corrente: 
<script>
 var today  = new Date(); // obtém a data corrente
 document.write(today.toLocaleDateString("pt-BR"));
</script>

O resultado será este;

.

2. Formatar Data de um Input Date.

Por padrão, o input do tipo date sempre retorna a data no formato americano e iremos nos frustrar se tentarmos converter usando o toLocaleDateString(“pt-BR”), mas é possível usar expressões regulares, o código é simples;

variavel.replace(/(\d*)-(\d*)-(\d*).*/, '$3/$2/$1');

Exemplo:

Escolha uma Data:
<input id="data" type="date" onchange="formataBr()"><br/>
<span id="resultadoUSA"></span><br/>
<span id="resultadoBr"></span>
<script>
  function formataBr()
  {
   var data = document.querySelector('#data').value; 
   document.querySelector('#resultadoUSA').innerHTML  =  data;
   document.querySelector('#resultadoBr').innerHTML  =  data.replace(/(\d*)-(\d*)-(\d*).*/, '$3/$2/$1');
  }
</script>

O resultado será este;

.

3. Formatar Data de um Input Date.

Se você já desenvolve aplicações web com troca de dados, então com certeza já tem uma experiência com JavaScript. Neste caso você pode usar a solução acima para tratar a conversão; variavel.replace(/(\d*)-(\d*)-(\d*).*/, '$3/$2/$1');