ReTabNews

O Moment.js foi uma das primeiras bibliotecas a ganhar notoriedade por sua capacidade de analisar, formatar e calcular datas de uma forma menos assustadora para os desenvolvedores. No entanto, hoje em dia existe uma alternativa interessante: o date-fns.

O date-fns é considerado uma alternativa valiosa ao Moment.js não apenas porque oferece o mesmo conjunto de recursos, mas também porque é atraente para programadores funcionais. Além disso, o date-fns tem um tamanho de pacote menor em comparação com o Moment.js, o que o torna mais fácil de usar em projetos com limitações de tamanho.

Instalando o date-fns

O date-fns pode ser instalado facilmente usando o npm ou o Yarn:

# Usando npm
$ npm install date-fns

# Ou usando yarn
$ yarn add date-fns

Formatando datas

A formatação de datas é o principal recurso de bibliotecas como o Moment.js e o date-fns. Isso ocorre porque o JavaScript nativo não tem uma maneira simples de lidar com isso.

O date-fns usa padrões de string semelhantes ao Moment.js:

const format = require('date-fns/format');
const stPattysDay = new Date('2020/03/17');
const formattedDate1 = format(stPattysDay, 'MM/dd/yyyy');
const formattedDate2 = format(stPattysDay, 'MMMM dd, yyyy');

console.log(formattedDate1);
// => "03/17/2020"

console.log(formattedDate2);
// => "March 17, 2020"

Existem muitas maneiras de formatar datas para que elas fiquem exatamente como você deseja.

Adicionando/Subtraindo datas

Agora que sabemos como formatar datas, o que dizer sobre a realização de adições/subtrações com elas? Existem várias funções para fazer isso:

addDays
subDays
addWeeks
subWeeks
addMonths
subMonths No exemplo abaixo, adicionamos 1 ano a uma data especificada:

const format = require('date-fns/format');
const addYears = require('date-fns/addYears');

const stPattysDay = new Date('2020/03/17');
const stPattysDayNextYear = addYears(stPattysDay, 1);
const formattedDate = format(stPattysDayNextYear, 'MMMM dd, yyyy');

console.log(formattedDate);
// => "March 17, 2021"

Usando locais

A formatação é bastante fácil, mas e os locais? Sabemos que os usuários visitarão seu site de todo o mundo e não queremos presumir que eles falam nosso idioma nativo. Para isso, podemos importar plugins de locais específicos:

const format =  require('date-fns/format');
const russianLocale = require('date-fns/locale/ru');

const stPattysDay = new Date('2020/03/17');
const formattedDate = format(stPattysDay, 'MMMM dd, yyyy', { locale: russianLocale });

console.log(formattedDate);
// => "марта 17, 2020"

Diferenças Entre Duas Datas

A capacidade de calcular as diferenças entre duas datas é importante para uma biblioteca de manipulação de datas. O date-fns fornece várias funções para calcular isso.

Por exemplo, podemos calcular os dias do dia 1º de janeiro até o Natal (bem como "dias úteis"):

const format = require('date-fns/format');
const addYears = require('date-fns/addYears');
const differenceInDays = require('date-fns/differenceInDays');
const differenceInBusinessDays = require('date-fns/differenceInBusinessDays')

const startDate = new Date('2020/01/01');
const endDate = new Date('2020/12/24');
const daysBetween = differenceInDays(endDate, startDate);
const workdaysBetween = differenceInBusinessDays(endDate, startDate);

console.log(daysBetween);
// => 358

console.log(workdaysBetween);
// => 256

🎁 Bônus! O date-fns Possui Uma Pequena Pegada 🎁 Um dos maiores inconvenientes de usar o Moment.js é que ele é grande! Não há uma maneira de importar funções individuais, porque sua API permite apenas encadeamento. Isso significa que você precisa importar a biblioteca inteira:

const moment = require('moment');
const formattedDate = moment(new Date()).format('MM/DD/YYYY');

console.log(formattedDate);
// => "03/17/2020"

Com o date-fns, você só precisa pegar as funções específicas de que precisa (como com o Lodash):

const format = require('date-fns/format');
const formattedDate = format(new Date(), 'MM/dd/yyyy');

console.log(formattedDate);
// => "03/17/2020"

Isso torna o date-fns uma dependência muito menor do que o Moment.js. Veja a imagem abaixo para comparar os tamanhos dos pacotes do Moment.js e do date-fns:

Comparação de tamanho do pacote Moment.js vs date-fns

Fonte: BundlePhobia

Observe que há uma maneira de configurar o webpack para excluir os plugins "locale". Isso reduziria significativamente o tamanho do pacote.

Conclusão