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.