Trabalhar com datas no Javascript pode ser uma dor de cabeça utilizando o objeto Date nativo da linguagem. A comunidade desenvolveu algumas soluções para melhorar essa experiência, como date-fns, dayjs e momentjs. A vantagem de utilizar a date-fns é que é possível importar apenas o que vai ser utilizado (reduzindo o tamanho final do projeto) e que os métodos utilitários não alteram o objeto Date original.
Instalação e configuração do date-fns em projetos JavaScript
Para instalar a biblioteca, estando em um diretório contendo um projeto npm inicializado:
Usando npm:
npm install date-fns --save
Usando yarn:
yarn add date-fns
Com isso, é possível importar a função de formatar em um arquivo .js:
const { format } = require("date-fns");
Principais funções do date-fns e como utilizá-las para formatar datas
A principal função da biblioteca é a format, importada acima. Ela recebe como parâmetros um objeto Date (ou um número de timestamp), uma string definindo a formatação e um objeto de configuração opcional e retorna uma string com a data formatada:
const data = new Date();
const dataFormatada = format(data, "dd/MM/yyyy");
console.log(data);// Fri Jul 07 2023 14:20:00 GMT-0300 (Horário Padrão de Brasília)
console.log(dataFormatada);// 07/07/2023
Muito mais prático e visual trabalhar com datas dessa forma, né? A lista completa de opções para a string de formatação pode ser encontrada aqui.
Além da função format, o date-fns fornece diversas funções utilitárias para trabalhar com datas, como:
addHours (e também addDays, addWeeks, addMonths etc):
const { addHours } = require("date-fns");
const data = new Date();
console.log(data);// Fri Jul 07 2023 14:20:00 GMT-0300 (Horário Padrão de Brasília)
console.log(addHours(data, 1));// Fri Jul 07 2023 15:20:00 GMT-0300 (Horário Padrão de Brasília)
isAfter (e também isBefore):
const { addDays, isAfter } = require("date-fns");const data = new Date();const ontem = addDays(data, -1);const amanha = addDays(data, 1);console.log(isAfter(ontem,data));// falseconsole.log(isAfter(amanha,data));// true
Traduzindo datas de forma prática
É possível utilizar as definições de idiomas da própria biblioteca para traduzir datas de forma automática:
const { format } = require("date-fns");const { ptBR } = require("date-fns/locale");
const data = new Date();
const dataFormatada = format(data, "dd 'de' MMMM 'de' yyyy", { locale: ptBR });
console.log(dataFormatada);// 07 de julho de 2023
Dicas e boas práticas para otimizar a formatação de datas usando o date-fns
Imagine um objeto usuario que possui as seguintes propriedades:
const usuario = { nome: "Júlia", idade: 22, criadoEm: new Date(2023, 2, 1, 12, 0), atualizadoEm: new Date(2023, 5, 1, 12, 0),};
Ao precisar formatar várias datas, o arquivo acaba ficando poluído com diversas chamadas da função format. Com isso, é possível definir padrões para as formatações em funções utilitárias em um arquivo separado (aqui chamei de dateUtils.js:
const { format } = require("date-fns");const { ptBR } = require("date-fns/locale");
function formatarDataPadrao(data) {
return format(data, "dd/MM/yyyy");
}
function formatarDataPorExtenso(data) {
return format(data, "dd 'de' MMMM 'de' yyyy", { locale: ptBR });
}
module.exports = { formatarDataPadrao, formatarDataPorExtenso };
Para então, quando precisar utilizar:
const formatarData = require("./dateUtils.js");
const usuario = { nome: "Júlia", idade: 22, criadoEm: new Date(2023, 2, 1, 12, 0), atualizadoEm: new Date(2023, 5, 1, 12, 0),};
console.log(formatarData.formatarDataPadrao(usuario.criadoEm));// 01/03/2023
console.log(formatarData.formatarDataPorExtenso(usuario.atualizadoEm));// 01 de junho de 2023
Conclusão: benefícios do uso do date-fns na formatação de datas
Ao trabalhar com datas no Javascript (seja formatando ou realizando operações), é possível utilizar o date-fns para que esse trabalho seja feito de forma mais fácil e já contando com traduções.
Em um mundo acelerado e com muitas distrações, é fundamental utilizar estratégias que acelerem o trabalho, mantendo, ao mesmo tempo, a qualidade das entregas.
Aprenda isto e muito mais nos outros conteúdos do nosso blog.
Escrito por Pedro Gaya
Perguntas Frequentes FAQ:
1- O que é o Date-fns?
O Date-fns é uma biblioteca JavaScript que fornece funções para manipulação, formatação e cálculos de datas. É uma ferramenta essencial para projetos web, facilitando o trabalho com datas e oferecendo uma ampla gama de recursos.
2- Quais são os principais recursos do Date-fns?
O Date-fns possui uma variedade de recursos, incluindo formatação de datas, manipulação de tempo, cálculos de diferença entre datas, parsing de strings de datas, suporte a localização e muito mais. Esses recursos permitem que os desenvolvedores trabalhem de forma eficiente com datas em projetos web.
3- Por que o Date-fns é uma ferramenta essencial para formatação de datas em projetos web?
O Date-fns é uma ferramenta essencial para formatação de datas em projetos web devido à sua simplicidade, flexibilidade e ampla gama de recursos. Ele oferece uma sintaxe clara e intuitiva para manipulação de datas, facilitando o desenvolvimento e a manutenção do código. Além disso, o Date-fns é uma biblioteca leve e modular, permitindo que os desenvolvedores utilizem apenas os recursos necessários, evitando o carregamento de código desnecessário.
4- O Date-fns é compatível com outros frameworks e bibliotecas JavaScript?
Sim, o Date-fns é compatível com vários frameworks e bibliotecas JavaScript populares, como React, Angular, Vue.js e muitos outros. Ele pode ser facilmente integrado aos projetos existentes e oferece suporte a módulos independentes, o que o torna flexível para ser utilizado em diferentes contextos e ambientes de desenvolvimento.
5- O Date-fns possui suporte a localização?
Sim, o Date-fns possui suporte a localização, o que permite formatar datas de acordo com diferentes idiomas e regiões. Ele oferece a capacidade de configurar e personalizar os formatos de data de acordo com as preferências específicas de cada localidade, tornando-o altamente adaptável a diferentes necessidades de internacionalização.
6- O Date-fns é uma biblioteca de código aberto?
Sim, o Date-fns é uma biblioteca de código aberto. Isso significa que seu código-fonte está disponível para acesso, inspeção e contribuição pela comunidade de desenvolvedores. Essa natureza de código aberto promove a transparência, colaboração e evolução contínua da biblioteca.