O objeto Format Date e o formato de datas em JavaScript
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?
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íficosAgora 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 Format | Exemplo de saída | Padrã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 NaNPor 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 NaNCuriosidade
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: