Forem

Cover image for Trabalhando com datas e substituindo o Moment.JS
Aline Bezzoco
Aline Bezzoco

Posted on • Edited on

6

Trabalhando com datas e substituindo o Moment.JS

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; 
}
Enter fullscreen mode Exit fullscreen mode

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; 
}
Enter fullscreen mode Exit fullscreen mode

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; 
}  
Enter fullscreen mode Exit fullscreen mode

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; 
} 
Enter fullscreen mode Exit fullscreen mode

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!

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (1)

Collapse
 
marcusmann profile image
Marcus Almeida

Muito bom esse artigo! Inclusive eu não sabia dessas mudanças e tinha recomendado o moment.js para as pessoas!

Agora eu tenho um bom artigo para recomendar que no caso é o seu

Visualizing Promises and Async/Await 🤯

async await

Learn the ins and outs of Promises and Async/Await!

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay