Javascript Date: Aprenda a usar Data e Hora

O objeto JavaScript Date faz parte dos objetos globais disponíveis na linguagem e é utilizado para a manipulação de data e hora. Para isso, conta com uma série de funções de data, ou seja, um conjunto de métodos que permite trabalhar com esse tipo de informação com a precisão necessária. 

A manipulação de informações sobre a data e a hora requer muita atenção, pois existem situações que podem causar alterações no seu conteúdo em função da diferença de horários entre as localizações. Por isso, é preciso entender como esse objeto funciona e qual a melhor forma de garantir a precisão adequada ao trabalhar com datas em JavaScript.

Pensando nisso, fizemos este post em que vamos mostrar:

Quer saber mais? Confira!

Antes de prosseguir, aproveite e faça o download da trilha de front-end abaixo para entender os múltiplos caminhos que um profissional pode se especializar na área.

banner download da trilha de front-end

O que é o objeto Date?

Antes de falarmos sobre o objeto Date, é preciso dizer que o JavaScript trabalha com valores de tempo baseados em milissegundos. Na prática, é feito um cálculo que tem como base a data de 01 de janeiro de 1970 às 00:00:00 UTC, que é chamada de época Unix, enquanto UTC significa Tempo Universal Coordenado.

A data de hoje, por exemplo, corresponde a uma quantidade “x” de milissegundos decorridos a partir dessa data original. Já as datas em períodos anteriores a esse são armazenadas com o valor negativo.

O objeto Date, portanto, armazena a data em milissegundos em formato numérico representado por um inteiro longo. Faz parte do seu conteúdo o dia, o mês, o ano, a hora, os minutos, os segundos e o time zone, que indica a diferença de horário com relação ao meridiano de Greenwich, ou seja, o horário GMT ou UTC.

Quando uma instância do objeto Date é iniciada sem nenhum parâmetro, o JavaScript segue a data do navegador, ou seja, não é utilizada a data do servidor em que o site está armazenado. Já se ela é informada por algum método de input, como digitada em um formulário, pode ter formatos diferenciados, além de contar ou não com todos os elementos necessários para que seja considerada completa.

Em decorrência dessas particularidades, é preciso ter atenção ao trabalhar com data no JavaScript, já que, se ela não tiver todos os elementos, ou seja, os valores referentes à data e a hora, pode ocorrer alguma variação em sua utilização. 

No vídeo abaixo, a Ana Cardoso, Tech Lead aqui na Trybe, explica como você pode usar o objeto DATE para configurar suas datas e horários em seus códigos JAVASCRIPT.

Qual a sua sintaxe?

Antes de instanciarmos o objeto Date, é importante deixar claro que existe a função Date() que retorna a data atual em formato de string. Entretanto, essa função não cria um objeto Date, ou seja, ela traz apenas o resultado da data atual em uma string. Sua forma de utilização também é diferente, pois ela usada como uma função. Observe a seguir:

var testeData = Date();
console.log(testeData);
console.log("A variável testeData é do tipo: " + typeof(testeData));
/* Tue Jul 14 2020 15:40:44 GMT-0300 (GMT-03:00)
A variável testeData é do tipo: string
*/

Para que um objeto Date seja criado é preciso utilizar o construtor new(). É ele que determina que a variável em questão é um objeto e não uma string, como acontece quando utilizamos a função Date(). Esse entendimento é muito importante para que não haja confusão em sua utilização.

Basicamente, existem quatro sintaxes que podem ser usadas para declarar um objeto do tipo Date. Confira, a seguir, cada uma delas.

Sem a utilização de parâmetros.

O objeto Date pode ser declarado apenas com a utilização da declaração new(), que representa a inicialização de um objeto.

new Date()

Ao instanciarmos o objeto Date sem nenhum parâmetro, o JavaScript cria uma variável com o conteúdo referente ao momento de criação. Veja o código a seguir.

var dataAtual = new Date();
console.log(dataAtual);
console.log("A variável dataAtual é do tipo: " + typeof(dataAtual));
/* saída: Tue Jul 14 2020 16:09:49 GMT-0300 (GMT-03:00) {}
A variável dataAtual é do tipo: object
*/


Perceba que ao solicitarmos a exibição referente ao tipo de variável correspondente, obtemos a confirmação de que a variável dataAtual é um tipo objeto. Isso porque ele foi inicializada com o construtor new().

Com parâmetro em milissegundos

Outra forma de instanciar o objeto Date é atribuindo um valor a ele em milissegundos.

new Date(valor_em_milissegundos)


Aqui o parâmetro valor_em_milissegundos é um conteúdo numérico que representa a data correspondente em milissegundos. Confira o exemplo a seguir.

var novaData = new Date(1594682971156);
console.log(novaData);
// saída: Mon Jul 13 2020 20:29:31 GMT-0300 (GMT-03:00) {}


Com parâmetros de data e hora

Há também a possibilidade de informar todos os elementos que compõem a data. Veja a sintaxe.

new Date(ano, mês [, dia [, hora [, minutos [, segundos [, milissegundos]]]]])

No qual:

  • ano: corresponde a um valor numérico inteiro. É importante dizer que, se o valor do ano for informado com dois dígitos apenas, será considerado o período entre 1900 a 1999. Portanto, para indicar o ano após 2000 é preciso utilizar quatro dígitos;
  • mês: valor numérico que representa os meses, no qual 0 indica o mês de janeiro e 11 se refere ao mês de dezembro;
  • dia: valor inteiro e opcional. Se nada for informado, o padrão utilizado será 1;
  • hora, segundos e milissegundos: valores inteiros e opcionais, que se não forem informados terão os valores iguais a 0.

Veja um exemplo a seguir.

var dataParametro = new Date(2020,2,01,8,30,0);
console.log(dataParametro);
//saída: Sun Mar 01 2020 08:30:00 GMT-0300 (GMT-03:00) {}
var dataParametro2 = new Date(2020,2,01);
console.log(dataParametro2);
//saída: Sun Mar 01 2020 00:00:00 GMT-0300 (GMT-03:00) {}


Perceba que apesar de informarmos “2” no segundo parâmetro, que corresponde ao mês, obtivemos o mês de março como saída. Como dissemos, isso acontece porque os meses são indicados a partir de 0. Além disso, fizemos um exemplo com horário completo e o outro sem as horas. Veja que foi atribuído zero para o valor correspondente.

Com string

Por fim, temos a opção de declarar um objeto Date com a passagem de uma string de caracteres que contém a informação referente à data. Veja a sintaxe:

new Date(string)


Ao instanciar um objeto Date com a utilização de uma string que representa a data, é importante observar o formato de entrada. Isso porque a informação da string será convertida para o objeto Date, o que só será possível se ela tiver uma formatação adequada. Basicamente, existem três possibilidades de entrada de JavaScript Date formats:

  • ISO Date: que segue o padrão internacional ISO 8601, no qual a data tem o formato YYYY-MM-DDTHH:MM:SSZ;
  • Long Date: em que a data contém o formato MMM DD YYYY;
  • Short Date: com o formato MM/DD/YYYY.

Confira como é o código para instanciar um objeto Date com parâmetro em string em cada um desses formatos. Observe também que, no último exemplo, utilizamos a data por extenso, o que não é um formato admitido em JavaScript. Por isso, o resultado nesse caso é uma data inválida.

var dataStringISO = new Date("2020-02-15T06:00:00Z");
console.log(dataStringISO);
//saída: Sat Feb 15 2020 03:00:00 GMT-0300 (GMT-03:00) {}
var dataStringLong = new Date("Feb 15 2020");
console.log(dataStringLong);
//saída: Sat Feb 15 2020 00:00:00 GMT-0300 (GMT-03:00) {}
var dataStringShort = new Date("02/15/2020");
console.log(dataStringShort);
// saída: Sat Feb 15 2020 00:00:00 GMT-0300 (GMT-03:00) {}
var dataSemFormato = new Date("15th February 2020");
console.log(dataSemFormato);
//saída: Invalid Date {}

Perceba que existem diferentes formas de informar a data em uma string. Entretanto, é preciso que ela esteja no formato correto para que o JavaScript entenda qual o valor de seu conteúdo.

Quais as propriedades e métodos Date?

O objeto Date contém propriedades e métodos que ajudam as pessoas que desenvolvem programas a manipular datas de diferentes maneiras. Confira, a seguir, alguns desses recursos.

Propriedades

Date.length

A propriedade Date.length corresponde ao tamanho de argumentos aceitos pelo objeto Date. Portanto, o valor de Date.length é igual a 7.

Date.prototype

O prototype permite a inclusão de propriedades ao objeto Date. Mais adiante faremos um exemplo para demonstrar essa funcionalidade.

Métodos

O JavaScript oferece uma série de métodos que permitem a manipulação de datas. Veja alguns deles a seguir.

Date.now()

O método JavaScript Date.now() retorna o horário atual em milissegundos. Confira o código a seguir.

var dateNow = Date.now();
console.log(dateNow);
// saída: 1594822606138


Date.parse()

O método Date.parse() é utilizado para converter uma string que contém informação sobre a data para o valor correspondente em milissegundos, ou seja, faz a conversão de JavaScript string to date. Veja o exemplo.

var dataParse = Date.parse ("2020-01-15");
console.log(dataParse);
// saída: 1579046400000


Date.UTC()

O método Date.UTC() funciona semelhante ao construtor Date, com a mesma quantidade e disposição de parâmetros. A diferença é que ele faz o cálculo da data com relação ao horário UTC. No exemplo a seguir criamos a data com e sem o método Date.UTC para que você perceba a diferença com relação aos horários.

var dataUTC = new Date(Date.UTC(2020, 1, 20, 8, 0, 0));
console.log(dataUTC);
// saída: Thu Feb 20 2020 05:00:00 GMT-0300 (GMT-03:00) {}
var dataPadrao = new Date(2020, 1, 20, 8, 0, 0);
console.log(dataPadrao);
// saída: Thu Feb 20 2020 08:00:00 GMT-0300 (GMT-03:00) {}


Como utilizar instâncias de JavaScript Date?

Quando uma instância do objeto Date é criada, existem diferentes possibilidades de utilização desse objeto. É possível executar operações para recuperar partes do seu conteúdo por meio dos métodos disponíveis. Confira a exemplo a seguir.

var dataAtual = new Date();
var dia = dataAtual.getDate();
var mes = (dataAtual.getMonth() + 1);
var ano = dataAtual.getFullYear();
var horas = dataAtual.getHours();
var minutos = dataAtual.getMinutes();
console.log("Hoje é dia " + dia + "/" + mes + " de " + ano + ". Agora são " + horas + ":" + minutos + "h.");
// saída: Hoje é dia 15/7 de 2020. Agora são 14:59h.


Perceba que utilizamos diferentes métodos do objeto Date para recuperar as informações, entre eles:

  • getDate(): que traz o resultado do dia;
  • getMonth(): retorna o mês utilizado;
  • getFullYear(): retorna o ano com quatro dígitos;
  • getHours(): retorna o valor das horas;
  • getMinutes(): traz os minutos informados.

Por fim, apresentamos o resultado de uma forma diferente na console do navegador. O objeto Date contém diversos métodos. São eles:

Como funciona o objeto Date na prática?

A melhor forma de compreender as particularidades do objeto Date é por meio de exemplos práticos. Por isso, vamos colocar a mão na massa para ter uma melhor visualização de como utilizar datas em JavaScript.

Exemplo 1 

Ao instanciar uma data com argumentos, é importante observar se o conteúdo informado no parâmetro corresponde ao valor esperado. Por exemplo, os meses em JavaScript são representados pelos valores numéricos de 0 a 11. Portanto, se informarmos um valor maior, será feito um cálculo e adicionado ao parâmetro ao lado. Confira o exemplo a seguir.

var data = new Date(2018, 13, 1, 0, 0,0);
console.log(data);
//saída Fri Feb 01 2019 00:00:00 GMT-0200 (GMT-03:00) {}


Perceba que no primeiro exemplo, o mês está definido como 13, o que não existe. Portanto, foram adicionados 12 meses em 2018 e o parâmetro referente ao mês passou a valer 1, o que corresponde ao mês de fevereiro.

Exemplo 2

A mesma coisa acontece com relação ao parâmetro dia. Perceba, no exemplo a seguir, que o valor correspondente ao mês foi aumentado em dois meses em função da quantidade de dias informada ao instanciar o objeto.

var data2 = new Date(2019, 1, 62, 0, 0,0);
console.log(data2);
//saída: Wed Apr 03 2019 00:00:00 GMT-0300 (GMT-03:00) {}

Exemplo 3

Podemos utilizar o objeto Date para calcular a diferença entre um intervalo de tempo e outro. No exemplo a seguir, criamos uma variável data chamada dataInicio e atribuímos o momento atual a ela. A seguir, utilizamos o temporizador setTimeout(), que é utilizado para executar uma função callback após 5 segundos de espera. 

var dataInicio = new Date();
console.log("Data de inicio new Date() = " + dataInicio);
setTimeout(function(){ 
    var dataTermino = new Date(); 
    var diferencaTempo = dataTermino.getTime() - dataInicio.getTime();
    console.log("Data de término new Date() = " + dataTermino);
    console.log("Diferença de tempo = " + diferencaTempo);
}, 5000);
/* saída:
Data de inicio new Date() = Wed Jul 15 2020 17:29:21 GMT-0300 (GMT-03:00)
Data de término new Date() = Wed Jul 15 2020 17:29:26 GMT-0300 (GMT-03:00)
Diferença de tempo = 5026
*/


Se você quiser saber mais sobre o que é uma função callback, dê uma olhada neste conteúdo, que traz mais informações sobre como ela funciona. De volta ao nosso exemplo, criamos outra variável chamada dataTermino para obter a data atualizada após o período de 5 segundos.

Além disso, utilizamos o método getTime() em cada variável para recuperar o conteúdo armazenado em cada uma e fazer o cálculo da diferença entre o tempo final e o inicial.

Exemplo 4

O mesmo exemplo que mostramos acima pode ser feito utilizando o método Date.now(), que retorna o valor da data atual em milissegundos. Entretanto, nesse caso utilizamos não usamos o objeto Date. Confira a depuração do código a seguir.

var dataInicio2 = Date.now();
console.log("Data de inicio now() = " + dataInicio2);
setTimeout(function(){ 
    var dataTermino2 = Date.now(); 
    var diferencaTempo2 = dataTermino2 - dataInicio2;
    console.log("Data de término now() = " + dataTermino2);
    console.log("Diferença de tempo = " + diferencaTempo2);
}, 5000);
/* saída: 
Data de inicio now() = 1594845021818
Data de término now() = 1594845026843
Diferença de tempo = 5025*/


Exemplo 5

Como mencionamos, é possível utilizar prototype para criar propriedades ao objeto Date. Nesse exemplo vamos ver como empregar esse recurso para formatar data em JavaScript. Vamos criar uma propriedade que retorna o mês em português. Confira o algoritmo a seguir.

Date.prototype.getMesEmPortugues = function() {
    if (this.getMonth() == 0){this.mesEmPortugues = "Janeiro"};
    if (this.getMonth() == 1){this.mesEmPortugues = "Fevereiro"};
    if (this.getMonth() == 2){this.mesEmPortugues = "Março"};
    if (this.getMonth() == 3){this.mesEmPortugues = "Abril"};
    if (this.getMonth() == 4){this.mesEmPortugues = "Maio"};
    if (this.getMonth() == 5){this.mesEmPortugues = "Junho"};
    if (this.getMonth() == 6){this.mesEmPortugues = "Julho"};
    if (this.getMonth() == 7){this.mesEmPortugues = "Agosto"};
    if (this.getMonth() == 8){this.mesEmPortugues = "Setembro"};
    if (this.getMonth() == 9){this.mesEmPortugues = "Outubro"};
    if (this.getMonth() == 10){this.mesEmPortugues = "Novembro"};
    if (this.getMonth() == 11){this.mesEmPortugues = "Dezembro"};
};
var data = new Date();
data.getMesEmPortugues();
console.log("O mês atual é : " + data.mesEmPortugues);

Perceba que criamos uma função prototype chamada getMesEmPortugues(), que retorna a propriedade mesEmPortugues. Para isso, utilizamos o método getMonth(), que retorna o mês correspondente no objeto Date e atribuímos o valor da propriedade a cada mês. Portanto, podemos utilizar essa função para diferentes formas de apresentação da data.

Qual a compatibilidade com os navegadores?

A utilização do objeto Date pode variar de acordo com o navegador utilizado, especialmente os mais antigos, que não oferecem suporte a todos os recursos e pode ocasionar algum tipo de falha na aplicação. Por isso, é importante conferir quais navegadores são compatíveis com esse recurso. Os principais navegadores oferecem suporte a esse objeto, entre eles:

  • Chrome;
  • Firefox;
  • Internet Explorer;
  • Edge;
  • Safari;
  • Opera.

Existem diferentes formas de utilizar o objeto Javascrip Date. Trata-se de um recurso essencial para manipular datas em formatos diferenciados. Ele oferece uma série de métodos que podem ajudar ainda mais na precisão necessária para a utilização desse recurso em aplicações web.

Gostou do nosso conteúdo sobre a utilização de datas em JavaScript? Então, confira este guia inicial imperdível sobre expressões regulares!

Nascido na terra distante e quente de Teresina - PI em 1986, é quase Bacharel em Sistemas de Informação e trabalha com Desenvolvimento de Software desde 2007. Começou sua carreira na linguagem PHP e depois, em 2009, mudou para Ruby, na qual teve a felicidade de trabalhar no projeto de tradução da documentação para português (do Brasil) do framework Ruby on Rails. Já trabalhou em empresas como Jus Navigandi, e Enjoei, marketplace. Além de ter lidado com as linguagens Ruby e GoLang (2013-2016), e por fim impactou mais de 2 milhões de estudantes em todo o Brasil no AppProva, com as linguagens Ruby, PHP, JavaScript, GoLang e Elixir. Atualmente na Trybe é responsável pelo time de tecnologia de Experiência de Estudantes.