Sabemos bem que utilizar datas faz parte do dia a dia de pessoas que desenvolvem programas. Não há como fugir disso, pois elas são necessárias para diferentes tipos de conteúdos e são apresentadas em formatos variados. Por isso, é importante entender como utilizar JavaScript date format, ou seja, como formatar datas em JavaScript.
O objeto Date faz parte dos objetos padrão do JavaScript ou objetos globais predefinidos, que compõe números e datas e permitem executar operações numéricas. É preciso atenção ao manipular datas, pois existem algumas particularidades que é necessário observar para aplicar a formatação da maneira adequada. Para que você entenda mais sobre isso, fizemos este post em que vamos mostrar:
- JavaScript Date Input: formatos
- JavaScript format: output
- ISO Dates: diferentes tipos de leitura de data
- Time zones: entenda a sua função no objeto Date
- Formatar datas em Javascript: Confira 4 exemplos!
- Dicas importantes sobre datas: Veja 3 delas!
Vamos lá? Boa leitura!
Javascript Date Input: formatos
Basicamente, os formatos de input são os tipos de datas que o JavaScript pode receber e interpretar. Portanto, existem três formatos de datas que a linguagem trabalha. Confira, a seguir, cada um deles.
- ISO Date: que segue o padrão internacional e tem o formato YYYY-MM-DD, exemplo: “2020-01-29”;
- Long Date: tem o formato MMM DD YYYY, exemplo: Jan 29 2020 ou 29 Jan 2020;
- Short Date: MM/DD/YYYY, exemplo: 01/29/2020.
Parsing Dates
O método parse() converte uma string de caracteres, que contém uma representação de data, e faz um cálculo para transformá-la em milissegundos desde a data de 1 de janeiro de 1970. Portanto, se utilizarmos o método na data do exemplo acima teremos:
var parseDataLong = Date.parse ("Jan 29, 2020");
console.log(parseDataLong);
// saída: 1580266800000
var parseDataISO = Date.parse ("2020-01-29");
console.log(parseDataISO);
// saída: 1580256000000
var parseDataShort = Date.parse ("01/29/2020");
console.log(parseDataShort);
// saída: 1580266800000
Perceba que apesar de a data ser a mesma em todos os exemplos, existe uma pequena variação com relação ao resultado da data no formato ISO. Isso acontece porque não foi especificado qual o fuso horário correspondente. Em função disso, o JavaScript utiliza como padrão o fuso de UTC, ou seja, o fuso do meridiano de Greenwich, que é zero.
JavaScript format: output
Diferente dos tipos de entrada, todas as datas processadas pelo JavaScript são completas. Isso significa que ela contém todas as informações sobre o período. Portanto, se criarmos uma variável e atribuirmos a ela um objeto do tipo Date sem nenhum parâmetro adicional, o resultado será a data atual do navegador com as informações completas: data, hora e time zone. Confira o exemplo a seguir.
var novaData = new Date();
console.log(novaData);
// saída: Wed Jul 08 2020 10:17:49 GMT-0300 (GMT-03:00) {}
Perceba que há todas as informações com relação à data, inclusive o dia da semana e o fuso horário correspondente. É importante dizer que quando há o input de datas em qualquer um dos três formatos mencionados, teremos a data completa armazenada no objeto Date, mesmo que alguns valores estejam zerados. Veja o código a seguir.
var dataLongOutput = new Date("Jan 29, 2020");
console.log(dataLongOutput);
// saída: Wed Jan 29 2020 00:00:00 GMT-0300 (GMT-03:00) {}
Perceba que houve um input no formato Long Date, entretanto, ao exibir o resultado na console, a saída traz todas as informações. Como não informamos um horário, foi atribuído zero e o fuso horário será o utilizado pelo navegador.
ISO Dates: diferentes tipos de leitura de data
A ISO 8601 é uma norma internacional que determina qual é o formato da data e hora. Na prática, ela classifica qual o posicionamento de cada elemento que compõe a data e hora. A classificação, portanto, define que a organização deve ser do valor maior para o menor. Portanto, em primeiro lugar deve conter a informação sobre o ano, a seguir, o mês, dia, hora e minutos e segundos.
O objetivo da norma é evitar confusão na determinação das informações. Por isso, ela também define a quantidade de dígitos que cada informação deve conter. Portanto, a representação da data nesse formato é:
YYYY-MM-DDTHH:mm:ss.sTZD
No qual cada variável corresponde:
- YYYY: ano com quatro dígitos;
- MM: mês;
- DD: dia;
- T: indicação de início das horas;
- HH: horas;
- mm: minutos;
- ss: segundos;
- s: milissegundos;
- TZD: time zone, que corresponde a +hh:mm ou -hh:mm.
O JavaScript aceita inputs do tipo ISO date de algumas formas variadas. Entretanto, por não informar os dados completos, ocorrem variações ao atribuir o valor ao objeto Date. Confira, a seguir, como esses dados podem ser recebidos e os resultados armazenados na variável.
Ano e mês
Uma das formas de input é informando apenas o ano e mês, no formato “YYYY-MM”. Veja um exemplo:
var dataISOAnoMes = new Date("2020-01");
console.log(dataISOAnoMes);
//saída: Tue Dec 31 2019 21:00:00 GMT-0300 (GMT-03:00)
Somente ano
Confira a leitura para a informação apenas do valor correspondente ao ano.
var dataISOAno = new Date("2020");
console.log(dataISOAno);
//saída: Tue Dec 31 2019 21:00:00 GMT-0300 (GMT-03:00)
Data e horário
Ao informar a data e o horário, apesar de fornecer dados mais completos, ainda obtemos uma variação referente ao horário ao armazenar o conteúdo no objeto Date. Veja que a informação referente ao horário está definida entre as letras “T” e “Z”. Observe o código a seguir.
var dataISODataHora = new Date("2020-01-29T06:00:00Z");
//console.log(dataISODataHora);
//saída: Wed Jan 29 2020 03:00:00 GMT-0300 (GMT-03:00)
Long Dates
As datas longas (long dates) são datas que utilizam a abreviação de um mês em vez de seu número. O mês e o dia podem estar em qualquer uma das primeiras posições → “MMM DD YYYY” ou “DD MMM YYYY”. Nesse caso, ambos os formatos são aceitáveis.
O exemplo a seguir ilustra a saída, no código, de uma data longa:
//MMM DD YYYY - formato 1
const data = new Date("Apr 15 2015");
console.log(data);
//Resultado: Wed Apr 15 2015 00:00:00 GMT-0300 (Horário Padrão de Brasília)
//DD MMM YYYY - formato 2
const d = new Date("15 Apr 2015");
console.log(d);
//Resultado: Wed Apr 15 2015 00:00:00 GMT-0300 (Horário Padrão de Brasília)Short Dates
As datas curtas (short dates) são as datas que normalmente as pessoas norte americanas utilizam, compostas pelo formato “MM/DD/YYYY”. No entanto, esse formato pode ser menos familiar para o público internacional, já que, no Brasil por exemplo, utilizamos o formato “DD/MM/YYYY”
O exemplo a seguir ilustra a saída, no código, de uma data curta:
let shortDate = new Date("12/01/2021");
console.log(shortDate);
//Resultado: Wed Dec 01 2021 00:00:00 GMT-0300 (Horário Padrão de Brasília)Time zones: entenda a sua função no objeto Date
Time zone é o valor referente à diferença de horas entre uma determinada localização e o horário de Greenwich. O Brasil contém quatro time zones diferenciados devido ao tamanho de seu território. O horário padrão de Brasília, por exemplo, tem o time zone GMT-3, ou seja, existe uma diferença de menos três horas com relação ao horário de Greenwich.
Não informar o time zone ao definir a data em JavaScript pode trazer uma alteração ao recuperarmos o seu conteúdo. Conforme o exemplo mencionado na utilização de data e hora ISO, percebemos uma diferença de três horas entre o horário informado e o armazenado no objeto Date. Veja como será a saída do mesmo exemplo se informarmos o time zone.
var dataISODataHoraTmz = new Date("2020-01-29T06:00:00-03:00");
console.log(dataISODataHoraTmz);
//saída: Wed Jan 29 2020 06:00:00 GMT-0300 (GMT-03:00)
Perceba que a data é armazenada com o mesmo horário informado no input, ou seja, 06:00 horas. Portanto, a utilização do time zone contribui para a melhor precisão dos valores referentes às datas.
Formatar datas em JavaScript: confira 4 exemplos!
Já sabemos como o JavaScript lê e armazena a data e hora. Entretanto, nem sempre queremos utilizar esse formato para apresentar às pessoas usuárias de uma aplicação web. Por isso, é importante entender como formatar datas de maneiras diferentes.
Exemplo 1: JavaScript date format DD MM YYYY
Neste exemplo vamos formatar a data no modelo “DD/MM/YYYY”. Para isso, vamos utilizar alguns métodos disponíveis no JavaScript que permitem a manipulação de cada parte do objeto Date. Confira o algoritmo a seguir.
let data = new Date();
let dataFormatada = ((data.getDate() )) + "/" + ((data.getMonth() + 1)) + "/" + data.getFullYear();
console.log(dataFormatada);
// saída: 8/7/2020
Para formatar a data utilizamos três métodos disponíveis no objeto Date que facilitam a recuperação dos valores desejados, são eles:
- getDate(): que retorna o dia correspondente;
- getMonth(): retorna o mês;
- getFullYear(): retorna o ano com quatro dígitos.
Perceba que no método getMonth() somamos 1 no valor recuperado. Isso é necessário porque o método utiliza os números de 0 a 11 para referenciar os meses. Por exemplo, janeiro corresponde a 0, fevereiro a 1 e assim por diante. Por isso, é necessário adicionar 1 à numeração para que o valor utilizado seja o do mês desejado.
Exemplo 2: JavaScript date format YYYY MM DD
Vamos fazer outra simulação, agora com o formato YYYY-MM-DD. Assim como no exemplo anterior, vamos precisar dos métodos do objeto Date para construir o código. Veja como fica essa formatação ao depurar o código abaixo:
let data = new Date("Jan 29 2020 ");
let dataFormatada = (data.getFullYear() + "-" + ((data.getMonth() + 1)) + "-" + (data.getDate() )) ;
console.log(dataFormatada);
// saída: 2020-1-29
Exemplo 3: JavaScript date to string format
Neste exemplo vamos usar strings no formato dos meses, ou seja, vamos utilizar a saída DD MMM YYYY, na qual o MMM é uma abreviação do mês. Entretanto, o JavaScript não oferece um método para esse tipo de formatação. Por isso, é preciso criar o seu próprio código para exibir a data nesse modelo. Confira o código a seguir.
const meses = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul","Ago","Set","Out","Nov","Dez"];
let data = new Date("12/31/2019");
let dataFormatada = ((data.getDate() + " " + meses[(data.getMonth())] + " " + data.getFullYear()));
console.log(dataFormatada);
//saída: 31 Dez 2019
Exemplo 4: Colocar zero antes de dias e meses com um algarismo
Agora, vamos criar uma função callback para utilizar no momento da formatação da data. Se você não sabe o que é uma função callback, saiba mais sobre isso neste conteúdo. O objetivo da função é adicionar o algarismo zero antes do mês ou dia que tenha apenas um algarismo. Além disso, vamos retornar a data no formato DD/MM/YYYY. Veja como fica o código:
function adicionaZero(numero){
if (numero <= 9)
return "0" + numero;
else
return numero;
}
let dataAtual = new Date("2020-1-29"); //29/01/2020
let dataAtualFormatada = (adicionaZero(dataAtual.getDate().toString()) + "/" + (adicionaZero(dataAtual.getMonth()+1).toString()) + "/" + dataAtual.getFullYear());
console.log(dataAtualFormatada);
// saída: 29/01/2020
let dataAtual2 = new Date("2020-10-2"); //02/10/2020
let dataAtualFormatada2 = (adicionaZero(dataAtual2.getDate().toString()) + "/" + (adicionaZero(dataAtual2.getMonth()+1).toString()) + "/" + dataAtual2.getFullYear());
console.log(dataAtualFormatada2);
// saída: 02/10/2020
Fizemos duas formatações no exemplo acima para testar todas as possibilidades com relação aos meses e dias.
Dicas importantes sobre datas: Veja 3 delas!
A utilização de datas pode ocasionar algumas dúvidas ou dificuldades no processamento. Isso porque existem diferentes formatos de input, assim como várias maneiras de apresentá-la às pessoas usuárias da página. Por isso, vale a pena seguir algumas recomendações para diminuir o risco dessas ocorrências.
1.Sempre utilize zero antes de dias ou meses com apenas um algarismo
Essa dica é importante porque existem navegadores que apresentam falhas quando leem datas em que os dias ou meses têm apenas um algarismo. Para evitar esse transtorno, o melhor é criar uma função como a apresentada no exemplo 4 e adicionar o zero antes desses números sozinhos.
2.Prefira o formato ISO date
Sempre que possível, prefira utilizar o formato ISO date. Isso porque ele contém informações bem mais completas sobre a data, horário e time zone. Os outros formatos podem sofrer variações conforme o navegador e, dessa forma, apresentar variações no resultado da data.
3.Não omita as letras T e Z no formato ISO date
Como mencionamos no tópico sobre ISO date, as letras T e Z têm uma função específica, que é indicar o início da hora e time zone respectivamente. Ao utilizar esse formato, é importante não omitir essas letras, pois elas podem ocasionar falhas na conversão do objeto Date e, com isso, alterar o conteúdo da data.
4. Evite os formatos de datas indefinidos
Sempre que for possível, é necessário respeitar a ordem das datas, conforme o projeto que estiver trabalhando. Alternar meses, dias e anos pode nem sempre ser a melhor solução e poderá resultar em erros inesperados.
Os exemplos a seguir ilustram problemas comuns com formatos de data indefinidos, assumindo a data de 9 de setembro de 2022:
let data_curta1 = new Date("9/9/2022"); // Formato correto
let data_curta2 = new Date("2022/9/9"); // Possível leitura, erro ou NaNO formato de data “AAAA/MM/DD” (com barras como delimitador) é indefinido. Alguns navegadores tentarão ler o formato e poderão gerar um erro se não conseguirem, e outros retornarão um erro NaN (Not a Number ou Não é um número). Nesse caso, é necessário especificar as datas curtas no formato “MM/DD/AAAA”.
Como vimos ao longo do texto, há diferentes formas de aplicar o JavaScript date format, ou seja, de formatar datas em JavaScript. Portanto, observe com atenção os tipos utilizados na entrada e aplique os diferentes métodos disponíveis na linguagem para devolver à aplicação a data com a formatação desejada.
Gostou do nosso conteúdo sobre como formatar data com JavaScript Date Format? Então, veja este excelente guia inicial sobre expressões regulares e como utilizar esse recurso!
