Trabalhando com datas em JavaScript com MomentJS | iMasters
Tem 12 artigos publicados com 6034 visualizações desde 2018
Trabalhar com datas nunca é tão fácil; independente da linguagem que estamos utilizando, exige um certo cuidado e esforço. Pensando nisso, neste artigo tentarei simplificar e facilitar a nossa vida, apresentando a biblioteca MomentJS. Com ela, manipulação e criação de datas em JavaScript torna-se muito fácil.
A biblioteca MomentJS realiza criações, parses, manipulações e validações. Também conseguimos mostrar as datas e horas, dentre outras diversas funcionalidades. Ela pode ser instalada de diferentes maneiras em nosso projeto; para a mais simples, é só realizar o download, ou se preferir o download minificado, simplesmente copie o conteúdo para um arquivo .js dentro do projeto; assim poderemos importá-lo através da tag script.
Ela também pode ser instalada via gerenciadores de pacote, como yarn ou npm:
Instalação com o Yarn
Instalação com o Npm
Também podemos utilizar outros gerenciadores e maneiras de instalação que podem ser consultados na documentação.
Não será por falta de instalação que você deixará de conhecê-la ou utilizá-la.
Para começarmos a utilizar a MomentJS, devemos realizar o download de seu arquivo minificado (de preferência), como informado anteriormente, após ter o arquivo criado, precisaremos importá-lo em nossa página:
Para pegar a data atual, podemos simplesmente invocar a função moment. Ela irá devolver um objeto que funciona como um wrapper para o Date do JavaScript.
Outras maneiras de obter a data atual, seria:
Observação: Essas duas últimas maneiras funcionam apenas da versão 2.14.0 em diante, antes dela, o comportamento de ambos será diferente.
Mas, Matheus, eu queria poder passar uma data para a criação, isso é possível?
Sim. Para isso precisamos simplesmente passá-la como String para a função moment:
Também podemos passar uma data no formato que desejamos. Para isso, como segundo parâmetro devemos dizer qual parte da String representa os pedaços da data, ou seja, qual parte é o mês, dia ou ano. Em outras palavras, qual a formatação da data.
Epa, calma ai! Que doidera é essa de DD/MM/YYYY?
Esses são os formatos para representação de datas; cada um deles tem um significado:
D ou DD: dia do mês de 1 a 31.
M ou MM: mês do ano de 1 a 12.
Além desses formatos, existem outros. Por exemplo:
H ou HH: hora no formato 24, ou seja, de 00 a 23.
m ou mm: minutos de 0 a 59.
h ou hh: hora no formato 12, ou seja, AM e PM.
s ou ss: segundos de 0 a 59.
S, SS ou SSS: segundo fracionados de 0 a 999.
Mas como podemos garantir que a data passada está no mesmo formato que desejamos?
Veremos no próximo tópico!
Tudo certo, pois passamos a data no mesmo formato. E se passarmos uma data com hora?
No segundo exemplo a data está correta? Não. Passamos uma data com hora, porém, na formatação informamos apenas a data sem hora, portanto, a mesma será uma data inválida.
Tudo bem, Matheus, você falou que a data será inválida, mas como podemos confirmar isso?
Para verificar se uma data é inválida ou não, podemos utilizar a função isValid:
Pronto. Será impresso false no nosso console. Para testarmos, vamos retirar a hora e passar apenas data:
Além dos parâmetros já mencionados anteriormente, também podemos passar um locale para nossa data, assim, a data pode utilizar o idioma inglês en ou português pt. O locale deve ser informado como terceiro parâmetro:
Como podemos ver, o parâmetro para verificação de formato mudou para o quarto, portanto, as formas (básicas) para criar uma data, são:
Bom, agora já sabemos criar uma data de diversas maneiras (básicas). Para confirmar todas as maneiras, consulte a documentação.
O que mais podemos fazer com MomentJS?
Podemos realizar clones de data de uma maneira muito simples através da função clone:
Com toda certeza vamos precisar pegar (get) pedaços de uma determinada data. Para isso, temos as funções de get, sendo elas:
Essas são as maneiras (simples) que podemos extrais informações e valores de nossas datas, mas e se surgir a necessidade de setar (set) alguma informação, como posso fazer?
Observação: Tanto para pegar, como para setar, o mês começa em 0. Ou seja, de 0 a 11, onde 0 é janeiro e 11 é Dezembro.
O jeito mais simples de setar (set) algum valor em nossa data, é através das mesmas funções que utilizamos para pegar (get), fazendo uma pequena modificação. Devemos informar o valor que desejamos setar como parâmetro para as funções:
Neste exemplo será criado um objeto com a data referente ao dia 25/05/1994, 13:00:00.
Primeiro: qual informação desejamos setar em nossa data, por exemplo: mês, dia, hora, etc
Segundo: o valor que desejamos setar
No exemplo acima, foi adicionado dois anos para a data atual. Repare que a função recebe dois parâmetros, sendo eles:
Segundo: qual informação que desejamos adicionar
Em versões mais antigas da MomentJS, você pode ver os parâmetros em ordem contrária, porém, a forma contrária foi depreciada; ou seja, está em desuso.
Esses são apenas alguns exemplos de atalhos (shorthands). Para visualizar todos, consulte a documentação.
Assim como podemos adicionar, também podemos subtrair utilizando a função subtract, seguindo a mesma ideia da função add:
Para formatar datas, podemos utilizar a função format, passando como parâmetro uma String onde uma formatação deve ser passada, seguindo a ideia já mencionada anteriormente durante a criação de datas. Caso tenha esquecido, abaixo vou listar algumas opções:
DDD ou DDDD: dia do ano de 1 a 365.
No console, será impresso uma data e hora no formato brasileiro: 25/05/1994, 10:00. Para saber todas as possíveis formatações que podem ser feitas, leia a documentação.
Bom, essas foram apenas algumas funções que a MomentJS oferece. Podemos ir muito mais além, mas o artigo se estenderia muito.
Gostou? Já conhecia a MomentJS? Não deixe de comentar e se inscrever na newsletter para receber novidades de artigos!