Trabalhando com datas usando date-fns em JavaScript

Por
Twittar
Compartilhar
Compartilhar
Pin

Trabalhar com datas não é uma tarefa fácil. Mas, o pacote date-fns facilita o trabalho com as datas em JavaScript.

Vamos mergulhar fundo no pacote date-fns para tornar nossas vidas mais fáceis do que antes. O pacote date-fns é leve.

Instalando o pacote

Precisamos configurar o projeto com o npm para trabalhar com um pacote de terceiros. Vamos ver rapidamente as etapas para concluir nossa configuração.

Suponho que você tenha o NodeJS instalado ou IDE para praticar isso.

  • Navegue até o diretório desejado no qual você deseja trabalhar.
  • Execute o comando npm init para inicializar o projeto.
  • Responda a todas as perguntas com base na sua preferência.
  • Agora, instale o date-fns usando o comando abaixo
npm install date-fns
  • Crie um arquivo chamado dateFunctions.js

Agora, estamos prontos para entrar no pacote date-fns. Vamos aprender alguns métodos essenciais do pacote.

é válido

Todas as datas não são válidas.

Por exemplo, não há data como 2021-02-30. Como podemos verificar se a data é válida ou não?

O método isValid do pacote date-fns nos ajudará a descobrir se a data fornecida é válida ou não.

Examine se o código a seguir funciona bem ou não com a validade das datas.

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

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

Se você executar o código acima, descobrirá que 30 de fevereiro de 2021 é válido. Oh! Não é.

  O que são monitores intra-auriculares e quem deve usá-los?

Por que está acontecendo?

O JavaScript converte o dia extra de fevereiro para 1º de março de 2021, que é uma data válida. Para confirmar, imprima new Date(“2021, 02, 30”) no console.

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

O pacote date-fns fornece um método chamado parse para contornar esse problema. O método parse analisa a data que você forneceu e retorna resultados precisos.

Dê uma olhada no código abaixo.

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));

formato

Um dos usos básicos ao trabalhar com datas é formatá-las como queremos. Formatamos as datas em diferentes formatos usando o método format do pacote date-fns.

Formate a data como 23-01-1993, 1993-01-23 10:43:55, terça-feira, 23 de janeiro de 1993, etc.. Execute o seguinte código para obter a data correspondente 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"));

Você pode encontrar a lista completa de formatos aqui.

adicionar dias

O método addDays é usado para definir um prazo após um certo número de dias.

Simplesmente, podemos adicionar dias a qualquer data para obter a data do dia após alguns dias. Tem muitas aplicações.

  [FIXED] Sua resposta ao convite não pode ser enviada

Digamos que você faça aniversário depois de X dias e esteja ocupado nesses dias. Você pode não se lembrar do aniversário em sua agenda lotada. Você pode simplesmente usar o método addDays para notificá-lo sobre o aniversário após X dias. Tenha o código.

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

const today = new Date();

// birthday after 6 days
const birthday = addDays(today, 6);

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

Semelhante ao método addDays existem outros métodos como addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears, etc., Você pode adivinhar facilmente a funcionalidade dos métodos com seus nomes.

Experimente-os.

formatoDistância

Escrever código para comparar datas do zero é um pesadelo. Por que comparamos datas de qualquer maneira?

Existem muitos aplicativos em que você viu comparações de datas. Se você pegar sites de mídia social, haverá um slogan mencionando 1 minuto atrás, 12 horas atrás, 1 dia atrás, etc., Aqui, usamos a comparação de datas da data e hora da postagem até a data e hora atuais.

O método formatDistance faz a mesma coisa. Ele retorna o intervalo entre as duas datas fornecidas.

Vamos escrever um programa para encontrar sua idade.

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

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

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

eachDayOfInterval

Digamos que você tenha que descobrir sobre os próximos X dias nomes e datas. O método eachDayOfInterval nos ajuda a encontrar os dias entre a data inicial e final.

  Como excluir, arquivar e editar um canal do Slack (tutorial completo)

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"));
});

máximo e mínimo

Os métodos max e min encontram as datas máxima e mínima entre as datas fornecidas, respectivamente. Os métodos no date-fns são muito familiares e fáceis de adivinhar a funcionalidade desses métodos. Vamos escrever algum 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(`Max: ${max([_1, _2, _3, _4])}`);
console.log(`Min: ${min([_1, _2, _3, _4])}`);

é igual

Você pode adivinhar facilmente a funcionalidade do método isEqual. Como você acha que o método isEqual é usado para verificar se duas datas são iguais ou não. Veja o código de 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

Se falarmos sobre todos os métodos no pacote date-fns, levará dias para ser concluído. A melhor maneira de aprender qualquer pacote é se familiarizar com os métodos essenciais dele e depois ler a documentação para obter mais informações. Aplique o mesmo cenário para o pacote date-fns também.

Você aprendeu os métodos essenciais neste tutorial. Pesquise o uso específico no documentação ou considere fazer cursos online como JavaScript, jQuery e JSON.

Boa codificação 👨‍💻