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.

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 hoje = new Date();
  const dataFormatada = new Intl.DateTimeFormat("pt-BR").format(hoje);
  console.log(`
    Unformatted date: ${hoje}
    Formatted date: ${dataFormatada}
  `);
}
showDateTimeFormat();

Saída do código:

Unformatted date: Fri Nov 26 2021 15:28:38 GMT-0300 (Hora padrão de Brasília)
Formatted date: 26/11/2021

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.

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),
    new Date(),
)
 
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"

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.