Datas com JavaScript: uma maneira fácil de formatar

Fala stakers!

Vamos começar a usar a Internationalization API para resolver essas reclamações de formatação de datas pessoal! E vou mostrar como fazer isso da forma mais simples.

Bibliotecas JavaScript  VS Internationalization API

Vou ser sincero e falar que a formatação de datas, números e moedas (dinheiro), sempre foi muito chato de se fazer com o JS. Fazer somente com Vanilla JS, era muito trabalhoso.

O Moment.js é muito bom com datas. Ele deixou mais tranquilo fazer a formatação, cálculos e outras coisas para lidar com datas. Mas falando de formatação em si, é uma biblioteca muito grande.

Mas desde a popularização das bibliotecas várias coisas vêm sendo facilitadas, mas também vai deixando o pacote do JS mais pesado. Em sua grande maioria, não é lá um grande problema, porém ao pensar em performance, aí sim a coisa muda de forma.

Ai que entra a maravilha do Internationalization API. Formatação de datas, números, tempo e moedas. E o melhor de tudo é o suporte, quase em todos os browsers.

Agora vamos às vias de fato e olhar como usá-lo.

Como formatar datas no JavaScript

A formatação sempre foi terrível, mas essa solução deixou tudo muito mais tranquilo, pois se divide em dois métodos. Intl.DateTimeFormat() e Intl.RelativeTimeFormat()

O que faz o Intl.DateTimeFormat()?

O Intl.DateTimeFormat(), nos ajudando com a formatação das datas e hora. Levando em conta a linguagem e a localização para fazer a formatação.

Um exemplo:

  • 10/07/2021
  • 2021/11/05
  • 10 de Setembro de 2021
  • Domingo, 05 de dez de 2021 às 07:25 CET

Como usar o Intl.DateTimeFormat()?

Super tranquilo de usar. Primeiro, nós devemos configurar o construtor.

Você pode usar o exemplo acima tranquilamente, mas caso você queira usar a localização (locales) do seu browser, então deve passar um Array vazio para o construtor. Agora se você quer setar o local, deve ser passado uma string dessa forma pt-BR ou en-US.

Agora o segundo parâmetro, nos oferece mais controle sobre a formatação. E as opções são:

  • dateStyle: “full”, “long”, “medium” and “short”
  • timeStyle: “full”, “long”, “medium” and “short”
  • dayPeriod: “narrow”, “short” and “long”

Existem outras também, dê uma olhada na documentação.

No exemplo que irei mostrar agora, vemos que precisamos do método de formatação antes do construtor.

Saída do código:

O que o faz o Intl.RelativeTimeFormat()?

Ele nos ajuda a formatar datas e horas de uma forma mais legível.

São esses os exemplos que podemos usar com ele, o melhor de tudo é que a formatação é baseada na localização e na linguagem.

  • 3 anos atrás;
  • Em 5 minutos;
  • 15 segundos atrás;
  • Hoje;
  • Ontem.

Como usar o Intl.RelativeTimeFormat()?

Ele é bem parecido com o Intl.DateTimeFormat. Primeiro devemos configurar o construtor do Intl.RelativeTimeFormat.

Da mesma forma que o DateTimeFormat, o RelativeTimeFormat vai pegar a localização e da mesma maneira. Passando um Array vazio, ele vai pegar o default do browser. Podemos acionar pt ou nl para usar a linguagem de formatação.

O segundo parâmetro do construtor, podemos adicionar algumas configurações.

  • localMatcher: “lookup” ou “best fit” (o último é o default)
  • numeric: “always” ou “auto” (com o auto nós vamos receber algo como “ontem” ao invés de “1 dia atrás”
  • style: “long”, “short” ou “narrow”

Existem outras configurações também, dá um pulo da documentação.

Usando o Intl.RealtiveTimeFormat, precisamos calcular as datas. Mas podemos usar o date-fns para isso.

Install date-fns by running npm install date-fns.


Conclusão datas com JavaScript

Podemos usar API e bibliotecas, para nos auxiliares em tarefas que antes eram custosas e pesadas. Vamos deixar os códigos mais limpos e leves.

Gostou? Quer aprender mais de angular? Então veja aqui nosso Curso de Angular.

Aprenda mais de javascript em nossas postagens ou no Youtube.

Share This