Trabalhando com datas e substituindo o Moment.JS

#javascript

Créditos da imagem de capa: Calendly

Para quem não sabe em meados de 2020 as pessoas desenvolvedoras da biblioteca Moment.JS resolveram descontinuar os updates do mesmo devido as constantes mudanças das tecnologias com o passar os anos, especialmente do Javascript pós-ES6. Hoje em dia a linguagem nos permite trabalhar com datas de forma mais completa e não precisando tanto de bibliotecas para solucionar alguns dos problemas que antes era complicado de se resolver ou demandavam maior tempo.

O fato é que o Moment.JS foi muito útil nesses anos todos e nos ajudou a otimizar bastante o nosso tempo de desenvolvimento se tratando em lidar com datas no Javascript. Mas beleza, não vamos ter atualizações dessa lib e com o tempo precisamos atualizar os projetos que utilizam ele. E como substituir então o Moment.JS para o Date(), Intl e outras propriedades de data do Vanilla JS? Logo abaixo cito algumas propriedades da lib e como convertê-las :)

1. subtract()

Com o Moment fazíamos muitas coisas, entre elas o subtract() que é subtrair as datas para tirar a diferença entre elas. Com o JS podemos substituir da seguinte forma:

function subtractDay() { 
 const day = new Date(); 
 day.setDate(day.getDate() - 10); 
 return day; 
}

A função acima permite que a gente subtraia os dias em 10. Então o que ele faz é pegar a data atual, subtrair com o valor indicado e retornar a diferença. Então se hoje é dia 31/12 ele vai pegar e voltar 10 dias o que retornará o dia 21/12.

Dica: Uma boa forma de vê-lo funcionando é copiando e colando esse código no console do seu browser e dar enter para ver o resultado :)

2. fromNow()

Essa propriedade permitia que a gente trabalhe com o tempo relativo (1 dia atrás, 3 meses atrás e por aí vai) e com o JS podemos utilizar o Intl.RelativeTimeFormat(). Assim:

function relativeDay() { 
 const rtf = new Intl.RelativeTimeFormat('br');
 const day = rtf.format(-1, 'day'); 
 return day; 
}

A função acima determina que a const day retorne o resultado "1 dia atrás" (repare na const rtf que adicionei um atributo de tradução "br" (Português Brasil). Caso queira mudar o idioma pasta colocar a sigla desejada :)

3. format()

Aqui você tem várias formas de substituir dependendo da sua necessidade. Usamos o to.. para determinar o tipo de formatação. São elas:

toString retorna Wed Dec 30 2020 23:39:35 GMT-0300 (Horário Padrão de Brasília)
toDateString retorna Wed Dec 30 2020
toLocaleString retorna 30/12/2020 23:39:35
toLocaleDateString retorna 30/12/2020
toGMTString retorna Thu, 31 Dec 2020 02:39:35 GMT
toUTCString retorna Thu, 31 Dec 2020 02:39:35 GMT
toISOString retorna 2020-12-31T02:39:35.351Z

Exemplo de como utilizar uma dessas propriedades (vamos usar o toLocaleString()) :

function formatDate() { 
 const date = new Date(); 
 const formatDate = date.toLocaleString(); 
 return formatDate; 
}

A função acima retorna a data formatada dd/mm/aaaa hh:mm:ss e você pode formatar e customizar de acordo com o timezone ou idioma. Assim:

function formatDate() { 
 const date = new Date(); 
 const formatDate = date.toLocaleString('en', { timeZone: 'UTC' }); 
 return formatDate; 
}

Agora estamos determinando que a nossa função formatDate() retorne uma data formatada em inglês (AM/PM) e em UTC.

Esses foram alguns exemplos de como trabalhar com datas no Javascript para substituir algumas propriedades do Moment.JS. Caso você ainda prefira trabalhar com libs uma outra alternativa seria utilizar o date-fns.

Até a próxima!