Como Trabalhar com o Objeto Date em JavaScript?

Data e hora em JavaScript.

Neste artigo, iremos conversar um pouco sobre algumas formas de manipular o objeto Date em JavaScript, explorando maneiras de se construir uma data, e como formatar os dados quando eles chegam, por exemplo, vindos de um formulário html para serem recebidos e processados por esse objeto.

Para começar, simplesmente criando uma instância de Date, é retornado a data e hora atuais do sistema.

let data = new Date();
Instanciando objeto Date() em JavaScript.

Trocando o dia

Para mudar o dia, utilizamos o método setDate(). Hoje é dia 23, conforme você pode ver na imagem acima.

Vou alterar para dia 22 → data.setDate(22);

Alterando uma data com o método setDate() do objeto Date().

O número gigante que foi impresso após o uso do setDate() é um long, que representa a data. É com este número que o objeto trabalha lá por debaixo dos panos. Tanto é que, se você executar um getTime(), o verá novamente.

Invocando o método getTime() do objeto Date().

O construtor do Date() aceita este número para construir uma nova data. Veja:

let ontem = new Date(1574438069430);
Passando um long para o construtor de Date().

Isso quer dizer que, a partir do getTime() de uma data que você já tem, pode criar um novo objeto do tipo data.

Tratando uma data vinda de um formulário html

Existem várias maneiras de se construir uma data. Uma delas já foi vista acima, que é passando um long, representando uma data, para o construtor de Date().

No dia a dia desenvolvendo, frequentemente nos deparamos com a necessidade de se tratar uma data vinda de um input em um formulário html, semelhante ao que é mostrado na imagem abaixo.

Input do tipo data em formulário html.

Um input do tipo data, acaba nos trazendo o dado em string, no formato ano, mês e dia, com um traço - separando os dados. Conforme representado abaixo.

'2019-11-24'

Mas, será que é possível passar para o construtor de Date essa string diretamente?

Vamos experimentar.

String bruta sendo passada no construtor de Date().

Veja que tivemos problemas. O ano e o mês estão corretos, mas o dia foi descontado em uma unidade.

Bom, vamos então ter que trabalhar este input que recebemos do formulário.

Além do long visto acima, outra forma aceita por este objeto para a construção de uma data é um array, seja ele de strings ou numbers. As duas entradas abaixo são válidas.

new Date(['2019', '11', '24']);
Instanciando objeto data com array de strings.
new Date([2019, 11, 24]);
Instanciando objeto data com array de numeros.

Mas a questão é, como converter a string '2019-11-24' que está vindo do formulário?

Vamos utilizar o método split(), quebrando essa string em um array, usando como critério de separação o traço -.

O split divide um objeto string em um array de strings, obedecendo ao critério de separação informado como parâmetro.

Basta chamar, sobre o input, o método split. Passando como parâmetro, o critério de separação.

'2019-11-24'.split('-');
Transformando string em array de strings com o método split.

Passar um array no construtor do objeto data funciona porque, internamente, ele transforma o array recebido em string, usando como separador, a vírgula.

Ou seja, o array de strings ['2019', '11', '24'] ou de números [2019, 11, 24], será convertido para a string '2019,11,24'.

Lá por debaixo dos panos, o objeto Date() pega o array, por exemplo ['2019', '11', '24'], e junta tudo novamente em uma string através do método join(), tendo como critério de junção, a vírgula.

['2019', '11', '24'].join(',');
Array de strings transformada em string pelo método join.

Por isso que, se for mais cômodo a você, pode simplesmente passar uma string, separando os dados por vírgula.

let amanha = new Date('2019,11,24');
Instanciando um objeto Date() passando uma string com a data em seu construtor.

Já que ele aceita uma string com os itens separados por vírgula, outra forma de resolver, seria pegar o input do formulário e aplicar um replace com uma expressão regular.

'2019-11-24'.replace(/-/g, ',');
Substituindo traços de um string por vírgulas.

Nesse caso, simplesmente ajustamos a string para a forma que ele espera receber, substituindo o traço por vírgula.

O objeto Date também está preparado para receber uma string, com os dados separados por barra /.

new Date('2019/11/24');
Instanciando um novo objeto data através de uma string no construtor, onde os dados dessa string estão separados por barra.

Então se você recebe uma string data no formato 'DD-MM-AAAA' e deseja passá-la ao construtor de Date no formato 'AAAA/MM/DD', uma solução seria:

new Date('24-11-2019'
.split('-')
.reverse()
.join('/'));
Recebendo uma string data no formato 'DD-MM-AAAA' e passando-a ao construtor de Date no formato 'AAAA/MM/DD'.

Ou seja, com o método split() transformamos a string em um array de strings, invertemos a ordem do array com o método reverse(), fazendo com que o ano seja o primeiro elemento e o dia, o último. O mês continua em sua posição original. Por fim, juntamos os elementos do array novamente em uma string com o método join(), que usou uma barra / para isolar um dado do outro.

Se quiser tirar a prova, você também pode imprimir a expressão no console.

Inverter string e substituir o separador, de traço para barra.

Construindo uma data a partir de parâmetros independentes

O objeto Date() também aceita receber, no seu construtor, o ano, mês e dia em forma de parâmetros separados.

Uma vez que já temos o nosso array de strings, podemos lançar mão de um novo recurso, disponível a partir do ECMAScript 6 (ES6) para desmembrar um array, que é o spread operator.

Imprimindo nosso array, nenhuma novidade.

Convertendo uma string em array de strings e imprimindo o resultado no console do JavaScript.

E colocando o spread operator (a reticências) antes do array, os itens serão impressos soltos. Afinal, já não fazem mais parte de um array. Foram desmembrados.

Converter string em array de strings, desmembrar array e passar cada um de seus elementos como parâmetros de um método, objeto ou função em JavaScript.

O interessante do spread operator, é que ele tem a capacidade de passar, cada um desses itens do antigo array, como um parâmetro para o construtor de um objeto ou método. Foi, na verdade, exatamente isso o que ele fez no console.log acima.

A ideia é usar essa mesma lógica para o objeto Date.

let amanha = new Date(...'2019-11-24'.split('-'));
Convertendo uma string em array de strings, desmembrando o array e passando cada um de seus elementos como um parâmetro no construtor do objeto Date.

Mas veja que ele entendeu isso como sendo 24 de Dezembro de 2019. Como assim se eu passei 11? Para tirar a prova, vamos experimentar informar os parâmetros manualmente.

let amanha = new Date(2019, 11, 24);
Instanciando objeto Date com parâmetros separadamente em seu construtor.

O resultado é o mesmo. Isso quer dizer que não há nada de errado com o nosso spread operator.

Acontece que, nessa forma de criar a data, o mês deve ser passado de 0 a 11, onde 0 é janeiro, 1 é fevereiro, e assim por diante.

Ou seja, se eu quiser criar a data dessa forma, preciso pegar o mês informado e decrementar em uma unidade.

Isso quer dizer que, se estiver vindo a string data '2019-11-24', preciso dar um jeito de informar para o construtor do Date, os parâmetros separadamente e com o mês decrescido de uma unidade, algo assim: 2019, 10, 24.

Para isso, podemos lançar mão de um pouquinho de programação funcional em JavaScript.

Antes de o nosso spread operator desmembrar o array, iremos invocar o método map(), com o objetivo de decrementar o mês em uma unidade.

O map varre um array e transforma seus itens, seguindo as instruções da função que recebeu como parâmetro. O resultado é um novo array, transformado.

Digamos que eu tenha o seguinte array:

let numeros = [1, 2, 3];

Desejo percorrer este array, multiplicando cada item por 10.

let novosNumeros = numeros.map(item => item * 10);
console.log(novosNumeros);
Exemplo de uso do método map em JavaScript.

Escrevi a função observando a sintaxe das Arrow Functions.

O map também aceita receber, como segundo parâmetro, o índice do elemento que ele está varrendo.

No índice zero do nosso array, temos o ano. Já o mês, está no índice 1. Assim, através de um if, podemos subtrair em uma unidade o nosso mês.

let amanha = new Date(...'2019-11-24'
	.split('-')
	.map((item, indice) => indice == 1 ? item -1 : item));

console.log(amanha);

Optei por escrever um if ternário, enxugando o código.

Podemos ainda evitar este if e ter um código mais sucinto, veja:

Existe na Matemática, o módulo da divisão. Se você pegar o n e fazê-lo crescer 0, 1, 2, 3 . . . vai perceber que n módulo de 2 resultará sempre em 0 ou 1.

Exemplificando n módulo de dois em JavaScript no consolde do navegador.

Isso irá nos permitir fazer: item menos (índice módulo de dois). Pois quando o índice é zero, ou seja, a primeira posição do array, o item permanecerá com seu valor original. Já quando o índice for 1 (segunda posição do array, onde está o mês) haverá a subtração.

let amanha = new Date(...'2019-11-24'
	.split('-')
	.map((item, indice) => item - indice % 2));

console.log(amanha);

Executando o código abaixo no console do navegador, você verá que a data é criada corretamente.

new Date(...'2019-11-24'
.split('-')
.map((item, indice) => item - indice % 2));
Adequando parâmetros para que possam ser recebidos separadamente no construtor de Date, mas sem o uso do if. E sim, com o módulo da divisão.

Consultando o Dia, Mês e Ano de um Objeto Date

Além da saída no console, outra forma de conferir se a data informada foi interpretada da forma desejada, é utilizando os métodos getDate(), getMonth() e getFullYear() deste objeto. Obtendo o dia, mês e ano respectivamente.

Exemplo de uso dos métodos getDate(), getMonth() e getFullYear() do objeto Date em JavaScript.

Mas não podemos esquecer de que o objeto Date guarda internamente os meses de 0 a 11. Por isso, antes de mostrar o mês ao nosso cliente, devemos somar uma unidade a ele.

Tratando o mês do objeto Date em JavaScript.

Essas formas de tratar dados, bem como de trabalhar com o objeto Date, foram retiradas do livro Cangaceiro JavaScript, que você pode ler agora iniciando seu mês grátis na Amazon Kindle Unlimited.

Artigos Relacionados