Desenvolvimento

10 jan, 2019

Lidando com o tempo usando o Day.js

Publicidade

Lidar com datas e horários no JavaScript – e em linguagens de programação em geral – pode ser uma tarefa árdua. Existem inúmeras variáveis que precisamos levar em consideração ao lidar com esse tipo de informação: formato, local, fuso horário, dias da semana, anos bissextos, meses com 30 ou 31 dias, enfim – o que parece trivial pode se tornar uma tarefa que demanda muitas horas.

No JavaScript já temos algumas APIs para lidar com datas, mas nenhuma delas muito intuitiva. Foi aí que apareceu o Moment.js, uma pequena biblioteca de código aberto que nos permite parsear, validar, manipular e exibir datas e horários pro usuário através do JavaScript. Sua proposta foi tão bem aceita que ela se tornou referência neste aspecto.

Porém, como tudo que é bom, ele ganhou alguns concorrentes bem legais e neste artigo discutiremos especificamente sobre um deles: o Day.js.

Conhecendo o Day.js

Como a própria documentação do projeto já diz, o Day.js é uma pequena biblioteca JavaScript (é realmente pequena, tem somente 2kb!) que nos permite parsear, manipular, validar e mostrar datas e horários em navegadores modernos.

Além disso, ele é altamente compatível com o Moment.js, de modo que o próprio site diz: “Se você já usou o Moment.js, então você já sabe como usar o Day.js”.

Dados importantes sobre o Day.js e sua compatibilidade com os navegadores

O Day.js é um projeto de código aberto e está publicado no GitHub sob licença MIT, e se você achava que o projeto era pequeno por ser uma alternativa ao Moment.js, saiba que está muito enganado: ele já possui mais de 16 mil estrelas no repositório.

Ficou curioso? Vamos dar uma olhada em sua API.

Brincando com o tempo

Como já citado anteriormente, a biblioteca é muito semelhante ao Moment.js e nos oferece algumas funcionalidades interessantes, como o fato de ela ter uma API Chainable (encadeáveis).

Isso significa que conseguimos encadear os métodos (invocá-los um após o outro diretamente) para formatar as informações da maneira que precisamos dentro do contexto da nossa aplicação.

O primeiro passo para utilizar a biblioteca é instalar ela dentro do nosso projeto. Para isso, podemos utilizar o bom e velho npm. Entre no terminal e digite:

npm install dayjs --save

Feito isso, já conseguimos trabalhar com ela. O primeiro método que precisamos saber é o dayjs(). Uma vez invocado sem parâmetros, ele nos retorna a data no momento em que ele foi invocado.

Resultado do método dayjs()

A partir daqui, podemos começar a encadear métodos. Por exemplo, se quisermos o ano, mês e dia separadamente, podemos usar os métodos year(), month() e date(), respectivamente.

console.log(dayjs());
console.log(dayjs().year()); // 2018
console.log(dayjs().month()); // 11
console.log(dayjs().date()); // 5

O resultado é:

Resultado da manipulação das datas

Além da visualização, a manipulação das datas também é bem tranquila através do método set(). Basta termos o objeto de data do Day.js e invocar este método passando o critério que desejamos alterar (ano, dia, mês, etc). Podemos até mesmo encadear os três para gerar a data desejada.

console.log(dayjs().set('year',2015).set('month', 3).set('day', 25));

O resultado é o que segue:

Resultado do método set()

Aproveitando que estamos mostrando o resultado da data, podemos dar uma olhada nos métodos e formatações de display disponíveis.

A formatação no fundo é bem simples: basta utilizarmos o método format() com os parâmetros que definem como ele será exposto na tela. Por exemplo:

console.log(dayjs().format()); // ISO6801
console.log(dayjs().format('{YYYY} MM-DDTHH:mm:ssZ[Z]'));
console.log(dayjs().format('DD/MM/YYYY'));

O resultado será o seguinte:

Formatação de datas com o método format()

Todos os parâmetros possíveis para formatação estão neste link.

Conclusão

Bibliotecas, frameworks e afins são como ferramentas em uma caixa: quanto mais opções, melhor. Cabe ao desenvolvedor saber qual usar em cada uma das situações.

O Moment.js se consagrou como uma biblioteca para manipular datas e horários, mas é importante conhecer alternativas, e o Day.js é uma excelente opção.

Referências