Trabalhando com data no JavaScript

O JavaScript possui a classe chamada Date que nos permite trabalhar com data e hora. Podemos manipular datas acessando diretamente pelos atributos da classe ou pelos métodos disponibilizados pela própria classe.

Para instanciar uma nova data basta executar o código abaixo onde o resultado vai conter a data completa com o dia, mês, ano e hora, no padrão americano.

const hoje = new Date()
console.log(date)

O resultado será: Thu Feb 17 2022 18:11:57 GMT-0300 (Horário Padrão de Brasília).

Como alterar o dia, mês, ano e hora da data no JavaScript ?

Podemos alterar o valor da data passando diretamente para o parâmetro do construtor ao instanciar uma nova data como demonstrado nos exemplos abaixo.

const aniversario = new Date("December 17, 1995 03:24:00");
const aniversario = new Date("1995-12-17T03:24:00");
const aniversario = new Date(1995, 11, 17);

Todos os atributos da classe Date podem ser alterados passando os dados da data diretamente no parâmetro da classe como mostrado no exemplo a seguir

const [ano, mes, dia, hora, minuto, segundo, milissegundo] = [1995,11,17,3,24,0,15]
const aniversario = new Date(ano, mes, dia, hora, minuto, segundo, milissegundo);
console.log(aniversario)

o resultado será: Mon Dec 18 1995 00:00:15 GMT-0200 (Horário de Verão de Brasília)

Curso JavaScript - Fundamentos

Conhecer o curso

Métodos para manipular data no JavaScript

Como o Date é uma classe, a mesma possui métodos para nos auxiliar na manipulação de datas. Nos exemplos abaixo veremos quais são esses métodos.

Para pegar os quatro dígitos do ano podemos utilizar o método getFullYear(), como demonstrado a seguir é bem simples e você tera algo como 2022 ao usar.

const hoje = new Date()
hoje.getFullYear()

Podemos pegar de forma simples o mês atual utilizando o método getMonth().

const hoje = new Date()
hoje.getMonth()

Caso queira pegar a hora atual podemos usar o método getHours() como demostrado no exemplo a seguir.

const hoje = new Date()
hoje.getHours()

Métodos comuns para manipulação de data utilizando JavaScript

Abaixo veremos os métodos mais utilizados para manipular datas com JavaScript

const hoje = new Date()
hoje.getDate() // O dia do mês
hoje.getDay() // O valor inteiro do dia da semana
hoje.getFullYear() // O ano com quatro dígitos
hoje.getHours() // A hora do dia
hoje.getMilliseconds() // O número de milissegundos desde o ultimo segundo
hoje.getMinutes() // O número de minutos desde a última hora
hoje.getMonth() // o mês do ano
hoje.getTime() // O número de milissegundos desde a meia noite de 1° de janeiro de 1970
hoje.TolocaleString() // A data e hora local em formato de string

Formação Desenvolvedor Front-end

Conhecer a formação

Dica extra de como trabalhar com datas utilizando JavaScript

Na variável dia utilizamos o getDate(), porém em casos onde o número do dia é menor que 10, podemos adicionamos um 0 a esquerda utilizando o método padStart() como demonstrado no exemplo abaixo.

const hoje = new Date()
const dia = hoje.getDate().toString().padStart(2,'0')
const mes = String(hoje.getMonth() + 1).padStart(2,'0')
const ano = hoje.getFullYear()
const dataAtual = `${dia} / ${mes} / ${ano}`

O resultado será: 17 / 02 / 2022. Dessa forma vamos fazer com que nossa data tenha no mínimo dois caracteres, adicionando um zero no início da String para ficar algo mais natural.

Outro exemplo muito interessante é utilizar o operador unário mais +, que tenta converter o argumento em um número.

const [ano, mes, dia, hora, minuto, segundo, milissegundo] = [2022,02,21,09,58,0,35]
const data1 = new Date(ano,mes,dia,hora,minuto,segundo,milissegundo)
const data2 = new Date(ano,mes,dia,hora,minuto,segundo,milissegundo)
console.log(+data1)
console.log(+data1 == +data2)

O resultado será : 1647867480035 e true.

Conclusão

Neste artigo fizemos uma pequena introdução de como manipular datas no JavaScript. Usando a classe Date apresentada ao longo desse artigo, você poderá fazer eventos muito mais complexos. Saiba mais sobre o funcionamento da classe acessando a documentação.

Caso queira aprender mais sobre JavaScript e sua infinidade recursos saiba que aqui na TreinaWeb nós temos o curso JavaScript - Fundamentos que possui 07h13min de video e um total de 93 exercícios. Conheça também nossos outros cursos de JavaScript.

Veja quais são os tópicos abordados durante o curso de JavaScript - Fundamentos:

• Como os computadores funcionam;
• O primeiro código no navegador e no Node.js;
• Declaração de variáveis e operadores;
• Tomadas de decisão e laços de repetição;
• Trabalhando com Numbers, Strings, Arrays, Objects e Functions;
• Vários exercícios;
• Vários desafios de programação direto no navegador;
• Projeto prático para fixar o que foi aprendido.