O objeto Format Date e o formato de datas em JavaScript

O objeto Format Date e o formato de datas em JavaScript
Camila Pessôa
Camila Pessôa

Compartilhe

Introdução

Imagine que você foi contratado para criar uma aplicação que tem a responsabilidade de agendar consultas em uma clínica médica. Você completou o desafio mas se deparou com um problema: as datas em JavaScript estão aparecendo com o mês invertido! E agora, o que fazer? Sentar e chorar?! Calma “pequeno gafanhoto”, primeiro precisamos compreender o porquê disso acontecer...

Afinal, como funciona o principal objeto JavaScript responsável por esse mecanismo?

A animação mostra uma cena do video-clipe da banda Pink Floyd e sua música Time.A cena em loop apresenta vários relógios redondos de ponteiro se movimentando do canto superior esquerdo e em fila, depois se amontoam no centro, após isso continuam sua movimentação representando uma queda e giram 360º repetidamente até desaparecerem no canto inferior direito da tela. Ao fundo há a imagem estática de um céu, pois há nuvens contra o sol.

Como instanciar uma Data em JavaScript?

O primeiro passo é instanciar uma data. A linguagem JavaScript possui nativamente uma forma para executar essa ação. Para criar datas em JavaScript utilizamos o construtor Date. Os objetos Date criados a partir desse construtor representam um momento único no tempo no calendário ocidental (as datas) e possuem como base o valor em milissegundos (significa um milésimo de segundo e você pode calcular $segundos x 1.000$ para obter o resultado em milissegundos).

O uso do construtor Date apresenta algumas opções para instanciar Datas em JavaScript, vejamos a seguir:

new Date(); //retorna a data e horário atual pelo fuso horário zero

new Date(milissegundos);  //Apresenta a quantidade de milissegundos. JavaScript armazena datas em milissegundos desde Janeiro de 1970

new Date(dataString); //Cria uma data usando o padrão ISO de notação

new Date(ano, mês, dia, hora, minuto, segundo, milissegundos); //Cria um objeto date com hora e data específicos

Agora que já sabemos como instanciar Datas em JavaScript, vamos compreender um pouco mais sobre seus formatos?

Date Formats: Formatos de Data em JS

Ao instanciar um objeto Date através de um método de input, a saída pode tomar diferentes formas dependendo de sua escolha. Por padrão o JavaScript tem a saída de dates em um formato de texto, uma String e independente do formato de input, a saída terá essa estrutura:

Mon Jan 31 2022 18:32:35 GMT-0300 (Horário Padrão de Brasília)

Outro ponto de atenção é em relação ao ISO 8601, que é o padrão internacional para representação de horas e datas. A sintaxe (YYYY-MM-DD) também é o formato de data mais comum.

  • Mas como funciona na prática?

Se você instanciar uma nova data neste formato:

const dataIso = new Date("2015-03-25");
console.log(dataIso);

A saída no console do navegador será:

Tue Mar 24 2015 21:00:00 GMT-0300 (Horário Padrão de Brasília)

Tudo certo! Conseguimos criar nossa Data e seu formato padrão é completo, com texto em inglês e fuso horário GMT, que é o tempo médio de Greenwich e de forma simples representa as nossas 24 horas do dia. No entanto, sabemos que esse não é o único formato de data e precisamos ter bastante cuidado ao instanciar um objeto Date, pois a data computada pode variar de acordo com o fuso horário do seu navegador por padrão. De forma geral há 3 tipos de formatos de data de JavaScript, vamos observá-los na tabela abaixo?

Date FormatExemplo de saídaPadrão de formatação
ISO Date"2015-03-25T12:00:00Z" Padrão internacional“YYYY-MM-DDTHH:MM:SSZ” Data e hora estão separados por T e a hora UTC é definida com Z
short Date"03/25/2015" ou "2015/03/25"“MM/DD/YYY” Tipo curto
Long Date"Mar 25 2015" ou "25 Mar 2015"“MMM DD YYYY” Mais longo

O Javascript segue as seguintes regras de fuso horário por padrão:

  • Quando configurar uma data sem especificar o fuso horário, o JavaScript irá usar o fuso horário do seu navegador;
  • Quando capturar uma data sem especificar o fuso horário, o resultado será convertido ao fuso horário do seu navegador.

Dessa forma, se um usuário navegar pela região central dos Estados Unidos, a data e hora serão convertidas pelo navegador para CDT (Central US Daylight Time), mesmo que a data tenha sido criada em GMT(Greenwich Mean Time).

Formato de data undefined

Alguns navegadores podem não reconhecer um determinado input de data. O formato de data “YYYY/MM/DD” , com as barras, pode retornar um erro ou NaN (Not a Number), então procure sempre especificar as short dates no formato “MM/DD/YYYY”.

const shortFunciona = new Date ("02/24/2022"); //Forma correta, evita erros

const shortNaoFunciona = new Date("2022/02/24"); //Possibilidade de retornar erro ou NaN

Por outro lado, quando trabalhar especificamente com as datas no padrão ISO, o formato “”MM-DD-YYYY” é undefined. Alguns navegadores vão tentar interpretá-lo, porém é comum retornar NaN ou erro. Portanto, ao trabalhar com ISO sempre use o formato “YYYY-MM-DD”. Vamos conferir no exemplo:

const isoFunciona = new Date("2022-02-24"); //Forma correta, evita erros

const isoNaoFunciona = new Date("02-24-2022"); //Possibilidade de retornar erro ou NaN

Curiosidade

JavaScript usa uma convenção onde os números dos meses iniciam com 0 (Então Dezembro é 11), e o número dos dias começa com um. Isso é confuso, tenha cuidado. Os últimos quatro argumentos (horas, minutos, segundos e milissegundos) são opcionais e considerados zero quando não fornecidos. Os carimbos de data e hora são armazenados como o número de milissegundos desde o início de 1970, no fuso horário UTC. Isso segue uma convenção definida pelo “horário Unix”, que foi inventado nessa época. Você pode usar números negativos para vezes antes 1970.

Fonte: Eloquent JavaScript. 3rd edition. Marijn Haverbeke, p.149.

Conclusão

É importante formatar datas corretamente para evitar problemas em aplicações e facilitar a vida do usuário. Além disso, o SEO do google, o search engine optimization (mecanismo de busca otimizado) é mais eficiente se houver uma lista de todos os URLs relevantes com as datas da última modificação do conteúdo principal, imagine então como seria se uma organização por datas não existir em seu site?

Nesse sentido, o uso adequados das datas vai enriquecer seu projeto, e nada melhor do que entender o ”por baixo dos panos” para facilitar e otimizar o aprendizado.

Já passou alguma situação engraçada ou algum bug por conta de datas? Compartilha com a gente sua história aqui no servidor da Alura: Link para o Discord da Alura.

Quer se aprofundar em JavaScript? Conheça nossos cursos e formações:

Camila Pessôa
Camila Pessôa

Olá, sou a Camila ! Tenho 33 anos, sou mãe e ingressei na área de tecnologia por meio da robótica educacional. Participei do Bootcamp { Reprograma } com foco em Back-End /Node.js e curso Sistemas de Informação.Atualmente faço parte do Scuba-Team e tenho grande paixão por educação e tecnologia, pois acredito que essa combinação é transformadora!

Veja outros artigos sobre Programação