Bibliotecas JavaScript VS Internationalization API
Como formatar datas no JavaScript
O que faz o Intl.DateTimeFormat()?
Como usar o Intl.DateTimeFormat()?
O que o faz o Intl.RelativeTimeFormat()?
Como usar o Intl.RelativeTimeFormat()?
Conclusão datas com JavaScript
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.
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.
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 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.
Domingo, 05 de dez de 2021 às 07:25 CET
Super tranquilo de usar. Primeiro, nós devemos configurar o construtor.
new Intl.DateTimeFormat([])
new Intl.DateTimeFormat(locales)
new Intl.DateTimeFormat(locales, options)
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.
function showDateTimeFormat() {
const dataFormatada = new Intl.DateTimeFormat("pt-BR").format(hoje);
const dataFormatadaNL = new Intl.DateTimeFormat("nl-NL").format(hoje);
Unformatted date: ${hoje}
Formatted date: ${dataFormatada}
Formatted date NL: ${dataFormatadaNL}
showDateTimeFormat();
Unformatted date: Fri Nov 26 2021 15:28:38 GMT-0300 (Hora padrão de Brasília)
Formatted date: 26/11/2021
Formatted date NL: 26-11-2021
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;
Ele é bem parecido com o Intl.DateTimeFormat. Primeiro devemos configurar o construtor do Intl.RelativeTimeFormat.
new Intl.RelativeTimeFormat()
new Intl.RelativeTimeFormat(locales)
new Intl.RelativeTimeFormat(locales, options)
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.
import { differenceInHours } from 'date-fns';
const dif = differenceInHours(
new Date(2021, 6, 2, 6, 50),
const relative = new Intl.RelativeTimeFormat("en");
const relative2 = new Intl.RelativeTimeFormat("nl");
console.log(relative.format(dif, hora)) // Resultado: "1,300 horas atrás"
console.log(relative2.format(dif, 'hora')) // Resultado: "1.300 uur geleden"
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.