Como obter a data atual em JavaScript: guia completo para iniciantes

Como obter a data atual em JavaScript: analisando uma pergunta popular do Stack Overflow

Se você está começando no desenvolvimento web, mais cedo ou mais tarde enfrentará a tarefa: exibir a data atual na página. Parece simples, certo? Mas, como mostram as estatísticas do Stack Overflow, a pergunta "How do I get the current date in JavaScript?" recebe milhares de visualizações todos os meses. Por quê? Porque por trás de uma formulação simples, esconde-se uma série de nuances: desde formatos de saída até o trabalho com fusos horários.

Neste artigo, não vamos apenas fornecer o código pronto. Vamos analisá-lo detalhadamente, aprender a controlar os formatos e evitar as armadilhas típicas que os iniciantes enfrentam. Vamos lá!

Conheça: o objeto Date — sua principal ferramenta

Em JavaScript, não existe um comando especial "mostrar hoje". Em vez disso, a linguagem oferece um objeto poderoso, mas às vezes traiçoeiro, chamado Date. Para obter o momento atual, basta criar uma nova instância sem argumentos:

const now = new Date();console.log(now); // Saída: Tue Oct 15 2024 14:30:00 GMT+0300

Simples assim! Mas vamos ver o que realmente obtivemos. No console, você verá algo como Tue Oct 15 2024 14:30:00 GMT+0300. Este é um formato legível por humanos, mas nem sempre é adequado para tarefas reais. Imagine que você está criando uma loja online e quer exibir a data do pedido como "15/10/2024" — essa saída "nativa" não serve.

Isso acontece porque o objeto Date armazena os milissegundos decorridos desde 1º de janeiro de 1970 (época Unix). E o que vemos no console é o resultado de uma conversão implícita para string. Para ter controle sobre o formato, precisamos usar os métodos do objeto.

Métodos para extrair componentes da data

Imagine que a data é uma pizza que precisa ser cortada em pedaços: ano, mês, dia, horas, minutos, segundos. O objeto Date tem "facas" especiais — métodos para cada pedaço.

Aqui estão os mais populares:

• getFullYear() — retorna o ano (exemplo: 2024).
• getMonth() — retorna o mês de 0 a 11. Atenção: janeiro é 0, dezembro é 11. Esta é uma armadilha comum!
• getDate() — retorna o dia do mês (1-31).
• getDay() — retorna o dia da semana de 0 (domingo) a 6 (sábado).
• getHours(), getMinutes(), getSeconds() — obviamente, horas, minutos, segundos.

Vamos montar nossa própria data com eles:

const now = new Date();const year = now.getFullYear();const month = now.getMonth() + 1; // +1, porque janeiro = 0const day = now.getDate();const hours = now.getHours();const minutes = now.getMinutes();

console.log(`${day}.${month}.${year} ${hours}:${minutes}`);// Saída: "15.10.2024 14:30"

Observe que adicionamos +1 ao mês. Este é o erro clássico de iniciante — esquecer a numeração começando do zero. Lembre-se de uma vez por todas: getMonth() retorna 0 para janeiro.

Saída elegante: formatação de data

Montar a string manualmente é bom para entender, mas existem maneiras mais elegantes. O JavaScript oferece vários métodos integrados para formatação:

1. toLocaleDateString() — para saída localizada

Este método se adapta às configurações regionais. Quer em português? Claro:

const now = new Date();console.log(now.toLocaleDateString('pt-BR')); // "15/10/2024"console.log(now.toLocaleDateString('en-US')); // "10/15/2024"console.log(now.toLocaleDateString('de-DE')); // "15.10.2024"

Você pode até personalizar o formato conforme suas necessidades, passando um objeto com opções:

const options = {  year: 'numeric',  month: 'long',  day: 'numeric',  weekday: 'long'};console.log(now.toLocaleDate