🎨📅 Datas em Javascript: O pesadelo dos devs

Utilizando a biblioteca date-fns para manipulação de datas em Javascript.

O que é, o que é: Quase todo mundo odeia, e quase toda aplicação tem ?

Manipulação de datas

Se tem um assunto que causa calafrios é trabalhar com datas em Javascript (ou qualquer outra linguagem), principalmente para quem está começando seus aprendizados na área. Ao longo do tempo, as linguagens tem melhorado bastante sua forma nativa de trabalhar com isso, mas ainda não se chegou em um ponto ideal (pelo menos nas linguagens que conheço).

A confusão ocorre devido ao grande número de detalhes que datas/horários possuem: Fuso-horário, conversão de horários (segundos para minutos, segundos para horas, etc.), ISO-Date (MM/DD/YYYY), etc.

Existem inúmeras bibliotecas para ajudar a lidar com isso, porém escolhi a que mais tenho utilizado ultimamente: date-fns.

O date-fns é uma biblioteca para manipulação de datas em Javascript, e pode ser utilizado tanto no front-end (JS Vanilla, React, etc.), quanto no Back-end (NodeJS). Ela possui diversas funções para trabalhar com datas, e uma de suas vantagens é que não é necessário importar todas essas funções de uma vez. Você pode importar apenas aquelas que você vai utilizar, poupando recursos de memória.

Alguns exemplos de funções/métodos do date-fns:

• Método format: Função que recebe dois parâmetros, sendo o 1º a data que se deseja modificar, e o segundo qual o seu novo formato. Exemplo:

import { format } from 'date-fns';

 const dataNascimento = '2022-12-09 22:22:00'
 
 const dataNascimentoFormatada = format(new Date(dataNascimento), 
 "'Dia' dd 'de' MMMM', às ' HH:mm'h'") //Dia 09 de Dezembro, ás 22:22h
 

• Método formatDistanceToNow: Recebe uma data como parâmetro, e retorna a distância desta data em relação a data atual (a data exata no momento que a função foi chamada). Exemplo:

import { format } from 'date-fns';
import ptBR from 'date-fns/locale/pt-BR'

const dataNascimento = '2022-12-09 22:22:00'

const distanciaEntreDataNascimentoEAgora = formatDistanceToNow(new Date(dataNascimento), {
    addSuffix: true,
    locale: ptBR
}) // Há 11 minutos atrás

No exemplo a cima, utilizamos uma propriedade chamada locale, para determinar qual a língua/nacionalidade será utilizada na transformação da data. O padrão é en-US.

Além disso, utilizamos outra chamada addSuffix, que adiciona os textos "Há...atrás"

Vou deixar como fonte a documentação do date-fns, que mostra todos os métodos possíveis para se trabalhar com datas. Comenta ai se você já utilizou, ou outra biblioteca que você utiliza. Obrigado.