Date-fns: para formatação de datas em projetos web

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:

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:

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

isAfter (e também isBefore):

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:

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:

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:

Para então, quando precisar utilizar:

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.