Manipulando o tempo com o Day.js

Published in

Code Prestige

4 min readFeb 4, 2019

Manipular 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;
etc.

O que parece trivial pode se tornar uma tarefa que demanda muitas horas (e pode dar uma dor de cabeça enorme!).

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 a API do Moment.js, de modo que o próprio site também nos diz: “Se você já usou o Moment.js, então você já sabe como usar o Day.js”.

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.

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

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:

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:

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

Gostou? Recomende 👏 este artigo e acompanhe nossa publicação para não perder os próximos conteúdos!

Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.br • Facebook, Twitter, Youtube
Siga o autor deste artigo e troque uma ideia com ele! http://www.diegopinho.com.br • Twitter, LinkedIn

Aprenda mais com nossos cursos de programação online!

ECMAScript 6 • ECMAScript 7 e 8 • React 16 • VS Code • Mais