Domine o date-fns: Guia Completo para Datas em JavaScript

Foto do autor

By luis

O tratamento de datas pode ser complexo, mas o pacote date-fns simplifica essa tarefa em JavaScript, oferecendo uma solução leve e eficiente.

Vamos explorar a fundo o date-fns para otimizar nosso trabalho com datas. Este pacote se destaca por sua leveza e facilidade de uso.

Instalação do Pacote

Para utilizar o date-fns, precisamos configurar nosso projeto com o npm. Vamos rapidamente passar pelos passos necessários:

É preciso ter o NodeJS instalado, ou um ambiente de desenvolvimento que o suporte.

  • Navegue até o diretório onde deseja trabalhar.
  • Use o comando npm init para inicializar o projeto.
  • Responda às perguntas iniciais conforme suas preferências.
  • Instale o date-fns com o seguinte comando:
npm install date-fns
  • Crie um arquivo chamado dateFunctions.js

Agora, estamos prontos para explorar o date-fns. Vamos começar com alguns métodos cruciais do pacote.

isValid: Verificação de Validade

Nem todas as combinações de dia, mês e ano resultam em datas válidas.

Por exemplo, 30 de fevereiro de 2021 não existe. Como podemos identificar datas inválidas?

O método isValid do date-fns verifica se uma data é válida ou não.

Veja como o código abaixo lida com a validade de datas:

const { isValid } = require("date-fns");

console.log(isValid(new Date("2021, 02, 30")));

Se executar esse código, perceberá que 30 de fevereiro de 2021 é considerado válido! Isso não está correto.

Por que isso acontece?

O JavaScript interpreta 30 de fevereiro como 1 de março de 2021, uma data válida. Para confirmar, tente imprimir new Date("2021, 02, 30") no console.

console.log(new Date("2021, 02, 30"));

O date-fns oferece o método parse para resolver esse problema. parse analisa a data fornecida e retorna resultados precisos.

Observe o código a seguir:

const { isValid, parse } = require("date-fns");

const invalidDate = parse("30.02.2021", "dd.MM.yyyy", new Date());
const validDate = parse("25.03.2021", "dd.MM.yyyy", new Date());

console.log(isValid(invalidDate));
console.log(isValid(validDate));

format: Formatando Datas

Uma das tarefas mais comuns ao trabalhar com datas é formatá-las de acordo com nossas necessidades. O método format do date-fns permite formatar datas em diversos padrões.

É possível formatar datas como 23-01-1993, 1993-01-23 10:43:55, terça-feira, 23 de janeiro de 1993, e muitas outras formas. Execute o código abaixo para obter as datas nos formatos mencionados.

const { format } = require("date-fns");

console.log(format(new Date(), "dd-MM-yyyy"));
console.log(format(new Date(), "dd/MM/yyyy HH:mm:ss"));
console.log(format(new Date(), "PPPP"));

A lista completa de formatos está disponível aqui.

addDays: Adicionando Dias

O método addDays é usado para calcular datas futuras, adicionando um número especificado de dias a uma data base.

Podemos adicionar dias a qualquer data, obtendo a data correspondente a alguns dias após. Isso tem muitas aplicações práticas.

Imagine que seu aniversário é daqui a X dias e você estará ocupado nesse período. Para não se esquecer, você pode usar o método addDays para ser lembrado quando chegar o dia. Observe o código:

const { format, addDays } = require("date-fns");

const today = new Date();

// Aniversário em 6 dias
const birthday = addDays(today, 6);

console.log(format(today, "PPPP"));
console.log(format(birthday, "PPPP"));

Além de addDays, existem outros métodos como addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears, etc. As funcionalidades desses métodos são intuitivas com base em seus nomes.

Experimente-os!

formatDistance: Distância entre Datas

Comparar datas do zero é um processo complexo. Mas por que comparar datas?

Existem diversas aplicações para isso. Redes sociais, por exemplo, mostram mensagens do tipo “há 1 minuto”, “há 12 horas”, “há 1 dia”, etc. Isso envolve comparar a data e hora de publicação com a data e hora atual.

O método formatDistance realiza essa comparação. Ele retorna o intervalo entre duas datas fornecidas.

Vamos criar um programa para calcular sua idade:

const { formatDistance } = require("date-fns");

const birthday = new Date("1956, 01, 28");
const presentDay = new Date();

console.log(`Idade: ${formatDistance(presentDay, birthday)}`);

eachDayOfInterval: Dias em um Intervalo

Suponha que você precisa listar os nomes e datas dos próximos X dias. O método eachDayOfInterval ajuda a encontrar todos os dias dentro de um intervalo entre datas inicial e final.

Vamos descobrir os próximos 30 dias a partir de hoje:

const { addDays, eachDayOfInterval, format } = require("date-fns");

const presentDay = new Date();
const after30Days = addDays(presentDay, 30);

const _30Days = eachDayOfInterval({ start: presentDay, end: after30Days });

_30Days.forEach((day) => {
   console.log(format(day, "PPPP"));
});

max e min: Máximo e Mínimo

Os métodos max e min encontram as datas máxima e mínima em um conjunto de datas. A lógica dos métodos do date-fns é clara e autoexplicativa. Vamos ao código:

const { min, max } = require("date-fns");

const _1 = new Date("1990, 04, 22");
const _2 = new Date("1990, 04, 23");
const _3 = new Date("1990, 04, 24");
const _4 = new Date("1990, 04, 25");

console.log(`Máxima: ${max([_1, _2, _3, _4])}`);
console.log(`Mínima: ${min([_1, _2, _3, _4])}`);

isEqual: Igualdade entre Datas

A funcionalidade do método isEqual é evidente. Ele verifica se duas datas são iguais ou não. Veja o exemplo abaixo:

const { isEqual } = require("date-fns");

const _1 = new Date();
const _2 = new Date();
const _3 = new Date("1900, 03, 22");

console.log(isEqual(_1, _2));
console.log(isEqual(_2, _3));
console.log(isEqual(_3, _1));

Conclusão

A exploração detalhada de todos os métodos do date-fns levaria bastante tempo. A melhor forma de aprender sobre qualquer pacote é começar pelos métodos essenciais e, em seguida, consultar a documentação para aprofundar o conhecimento. Aplique essa abordagem ao date-fns.

Neste tutorial, você aprendeu os métodos fundamentais. Consulte a documentação oficial aqui ou considere cursos online, como JavaScript, jQuery e JSON.

Bons estudos e boa codificação 👨‍💻