DevWebPHP
Image
27/07/2020

Como converter o formato da data no JavaScript

# Data no JavaScript

Formatar data no JavaScript não é uma tarefa muito agradável.

Geralmente as pessoas recorrem a dependências como moment.js que é uma biblioteca completa para trabalhar com data, porém se você só precisa mudar o formato da data, não é interessante incluir uns kilobytes a mais só para isso.

Mas neste post vou mostrar como converter o formato da data no JavaScript sem o uso de bibliotecas.

# Como converter a data para o formato brasileiro.

Digamos que você recebe uma data no formato americano ou seja, YYYY-MM-DD, onde:

Letra Valor
Y Representa um dígito do ano (Year)
M Representa um dígito do mês (Month)
D Representa um dígito do dia (Day)

Para esse exemplo vamos usar o dia que foi decretado o estado de emergencia da pandemia do coronavirus no Brasil que, segundo a Wikipédia, foi dia 04/02/2020, que no formato americano é 2020-04-02.

# Formatando data usando o objeto Date

Com esse formato de entrada poreríamos tentar converter usando a API nativa do JavaScript Date:

const inicioPandemia = '2020-02-04';
let d = new Date();
d.setYear(inicioPandemia.substr(0,4));
d.setMonth(inicioPandemia.substr(5,2));
d.setDate(inicioPandemia.substr(9,2));
const dataBr = d.getDate() + '/' + d.getMonth() + '/' + d.getFullYear();
console.log('1º caso de COVID-19 no Brasil foi: ' + dataBr);
// "1º caso de COVID-19 no Brasil foi: 4/2/2020"
1
2
3
4
5
6
7
8

Veja que no retorno o dia e o mês não possuem o "0" à esquerda. Aqui podemos fazer um if para adicionar o zero quando o número for menor que 10:

const inicioPandemia = '2020-02-04';
let d = new Date();
d.setYear(inicioPandemia.substr(0,4));
d.setMonth(inicioPandemia.substr(5,2));
d.setDate(inicioPandemia.substr(9,2));
const mes = d.getMonth() < 10 ? '0' + d.getMonth() : d.getMonth();
const doa = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
const dataBr = dia + '/' + mes + '/' + d.getFullYear();
console.log('1º caso de COVID-19 no Brasil foi: ' + dataBr);
// "1º caso de COVID-19 no Brasil foi: 04/02/2020"
1
2
3
4
5
6
7
8
9
10

Ufa! Agora sim temos a data no formato certo!

# Convertendo a data usando RegExp

Mas poderíamos ter feito a formatação de outra forma usando RegExp.

Esse trecho pode ser executado em uma linha só, mas separei em linhas para deixar mais legível no post.

const inicioPandemia = '2020-02-04';
const regex = /(\d{4})-(\d{2})-(\d{2})/;
const replace = '$3/$2/$1';
const dataBr = inicioPandemia.replace(regex, replace);
console.log('1º caso de COVID-19 no Brasil foi: ' + dataBr);
// "1º caso de COVID-19 no Brasil foi: 04/02/2020"
1
2
3
4
5
6

# Formatar a data separando, invertendo e juntando novamente

Outra alternativa que pode ser feita com uma linha só é separar (split) a string, inverter (reverse) e juntar (join) novamente:

const inicioPandemia = '2020-02-04';
const dataBr = inicioPandemia.split('-').reverse().join('/');
console.log('1º caso de COVID-19 no Brasil foi: ' + dataBr);
// "1º caso de COVID-19 no Brasil foi: 04/02/2020"
1
2
3
4

# Comparar datas no JavaScript

Para comparar as datas temos deixá-las com o mesmo tipo.

No caso iremos converter as datas para o objeto Date:

const fimDaPandemia = '01/12/2020';
const dateFimPandemia = new Date();
const regex = /(\d{2})\/(\d{2})\/(\d{4})/;
const timeFimPandemia = Date.parse(fimDaPandemia.replace(regex, '$3-$2-$1'));
dateFimPandemia.setTime(timeFimPandemia);
console.log(dateFimPandemia);
// "Mon Nov 30 2020 21:00:00 GMT-0300 (Brasilia Standard Time)"
1
2
3
4
5
6
7

Ops... se onde você rodar esse script estiver configurado o fuso horário como GMT-3, vai ver que a data não imprime corretamente.

Isso acontece porque ao informar a data no método parse não passamos o timezone portanto o JavaScript vai usar o UTC, e ao imprimir no console.log, usa o timezone da máquina que executou o script.

Assegure-se sempre de ter o mesmo timezone quando for manipular as datas.

Para definir o timezone podemos adicionar o horário separado pela letra T de time, hora em inglês, e a letra Z, que representa o timezone, no final da data. E para imprimir a data corretamente vamos usar o método toUTCString, se não vai continuar imprimindo no timezone local.

const fimDaPandemia = '01/12/2020';
const dateFimPandemia = new Date();
const regex = /(\d{2})\/(\d{2})\/(\d{4})/;
const timeFimPandemia = Date.parse(fimDaPandemia.replace(regex, '$3-$2-$1T00:00:00Z'));
dateFimPandemia.setTime(timeFimPandemia);
console.log(dateFimPandemia.toUTCString());
// "Tue, 01 Dec 2020 00:00:00 GMT"
1
2
3
4
5
6
7

Agora vamos criar outra data para realizar a comparação. Para não ficar repetitivo, vamos criar uma função criarDataFormatoBr:

function criarDataFormatoBr(dataEmFormatoBr) {
  const data = new Date();
  const regex = /(\d{2})\/(\d{2})\/(\d{4})/;
  const timeDataEmFormatoBr = Date.parse(dataEmFormatoBr.replace(regex, '$3-$2-$1T00:00:00Z'));
  data.setTime(timeDataEmFormatoBr);
  return data;
}
1
2
3
4
5
6
7

Agora podemos usar a função para criar as duas datas e compará-las diretamente:

const fimDaPandemia = criarDataFormatoBr('01/12/2020');
const natal = criarDataFormatoBr('25/12/2020');
if (fimDaPandemia < natal) {
  console.log("Família reunida!")
} else {
  console.log("Mais outra live...");
}
// Família reunida!
1
2
3
4
5
6
7
8

# Manipulação de data

Agora que temos o objeto Date podemos manipular as unidades de tempo, como por exemplo adicionar 15 dias e remover 2 mêses:

const fimDaPandemia = criarDataFormatoBr('01/12/2020');
console.log(fimDaPandemia.toUTCString());
// Tue, 01 Dec 2020 00:00:00 GMT

fimDaPandemia.setDate(fimDaPandemia.getDate()+15);
console.log(fimDaPandemia.toUTCString());
// Wed, 16 Dec 2020 00:00:00 GMT

fimDaPandemia.setMonth(fimDaPandemia.getMonth()-2);
console.log(fimDaPandemia.toUTCString());
// Wed, 16 Sep 2020 00:00:00 GMT
1
2
3
4
5
6
7
8
9
10
11

# Alguns pontos importantes

  • Sempre trabalhe com as datas no mesmo fuso horário!
  • Os métodos setDate e getDate modificam os dias da data, não confunda com a data inteira.
  • Os métodos getDate, getMonth, getHours, getMinutes, getSeconds retornam inteiro, portanto não tem o zero à esquerda, você terá que formatar para exibir esses valores para o usuário.

Qualquer dúvida lança um comentário ai!

Copyright © DevWebPHP 2020