Como formatar datas em JavaScript

Trabalhar com datas é uma tarefa comum em muitos projetos de JavaScript, mas lidar com o formato padrão das datas pode ser um pouco complicado. A boa notícia é que o JavaScript oferece diversas maneiras de formatar e manipular datas com facilidade. Aqui estão algumas dicas para ajudar como formatar datas em JavaScript.

1. Usando o objeto Date

O objeto Date em JavaScript oferece uma forma simples de capturar e manipular datas e horários. Veja como criar uma nova instância de Date:

const dataAtual = new Date();
console.log(dataAtual); // Exibe a data e hora atual

No entanto, o formato padrão retornado por Date geralmente não é o que queremos. Vamos aprender a formatá-la.

2. Formatando com métodos nativos

A partir do objeto Date, você pode extrair partes específicas da data, como o ano, mês, dia, etc.

const dataAtual = new Date();

const dia = dataAtual.getDate();        // Dia do mês (1-31)
const mes = dataAtual.getMonth() + 1;   // Mês (0-11, por isso adicionamos 1)
const ano = dataAtual.getFullYear();    // Ano (ex: 2024)

console.log(`${dia}/${mes}/${ano}`);  // Exibe a data no formato dd/mm/aaaa

3. Formatando com toLocaleDateString()

Uma maneira fácil de formatar datas de acordo com o idioma e região é usar o método toLocaleDateString().

const dataAtual = new Date();
const dataFormatada = dataAtual.toLocaleDateString('pt-BR'); // Formato brasileiro (dd/mm/aaaa)
console.log(dataFormatada);

Você também pode personalizar mais o formato:

const dataFormatada = dataAtual.toLocaleDateString('pt-BR', {
  day: '2-digit',
  month: '2-digit',
  year: 'numeric'
});
console.log(dataFormatada);  // Exibe: dd/mm/aaaa

4. Usando bibliotecas externas: Moment.js

Embora o JavaScript nativo ofereça boas opções para formatar datas, bibliotecas como o Moment.js facilitam ainda mais o trabalho. No entanto, vale notar que o Moment.js já não é recomendado para novos projetos, mas ainda é amplamente utilizado em código legado.

// Supondo que você tenha o Moment.js instalado
const dataAtual = moment();
console.log(dataAtual.format('DD/MM/YYYY'));  // Exibe: 24/10/2024

5. Utilizando a API Intl.DateTimeFormat

Outra forma poderosa de formatar datas é com a API Intl.DateTimeFormat, que oferece maior controle sobre a formatação.

const dataAtual = new Date();
const formatador = new Intl.DateTimeFormat('pt-BR', {
  day: '2-digit',
  month: 'long',
  year: 'numeric',
});
console.log(formatador.format(dataAtual));  // Exibe: 24 de outubro de 2024

Outro exemplo prático

Os códigos abaixo faz com que o formato xx/xx/xxxx seja mostrado (formatado) na digitação em qualquer campo de texto, em seu documento:

function Formatadata(Campo, teclapres) {
	
   var tecla = teclapres.keyCode;
   var vr = new String(Campo.value);
   vr = vr.replace("/", "");
   vr = vr.replace("/", "");
   vr = vr.replace("/", "");
   tam = vr.length + 1;
		
   if (tecla != 8 && tecla != 8) {
		
      if (tam > 0 && tam < 2)
          Campo.value = vr.substr(0, 2) ;
      if (tam > 2 && tam < 4)
	  Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2);
      if (tam > 4 && tam < 7)
	  Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4, 7);
   }

}

Para chamar a função acima, faça:

<input type="text" name="data" id="data" onKeyUp="Formatadata(this,event)" />

Formatar datas em JavaScript pode parecer difícil no começo, mas com as ferramentas certas, como o próprio objeto Date ou a API Intl.DateTimeFormat, é possível personalizar as datas de acordo com as suas necessidades.

Se você está começando, experimente os métodos nativos e, se precisar de algo mais complexo, considere bibliotecas externas.

Dúvidas ou sugestões sobre como formatar datas em JavaScript? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: datas javascript