Trabalhando com datas e substituindo o Moment.JS
Aline Bezzoco
Posted on December 31, 2020
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!
Posted on December 31, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.