O objeto Format Date e o formato de datas em JavaScript

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:

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:

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?

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”.

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:

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:

• Formação JavaScript para Back-End
• Algoritmos e Lógica de programação: O que é isso e por quê é importante?
• Formação Iniciante em Programação
• SEO: Ferramentas gratuitas para seu site rankear melhor
• Trabalhando com datas em JavaScript
• Construtores em JavaScript
• Eloquent JavaScript