A manipulação de datas é um daqueles obstáculos de desenvolvimento que todos nós devemos pular em um ponto de nossa carreira, e ótimas ferramentas ajudam muito a domar a fera. A biblioteca Moment.js é essa ferramenta para desenvolvedores JavaScript. Desde que descobri o Moment.js, um projeto de código aberto, tenho usado religiosamente para simplificar a validação, análise e manipulação de datas no lado do cliente.
Neste tutorial, ajudarei você a começar a usar essa biblioteca de datas JavaScript ultra-útil.
O que é Moment.js?
Moment.js é uma biblioteca JavaScript gratuita e de código aberto que elimina a necessidade de usar o Dateobjeto JavaScript nativo diretamente. A biblioteca é um wrapper para o Dateobjeto (da mesma forma que o jQuery é um wrapper para JavaScript), tornando o objeto muito mais fácil de trabalhar.
O problema com o objeto do JavaScript Datenão é a funcionalidade que ele traz; é extremamente complicado usar como desenvolvedor. Se você quiser fazer uma análise complexa, validação e exibição de datas, acabará escrevendo muito código. O Moment.js também estende os recursos de data JavaScript nativos com uma variedade de recursos, como tempo relativo, tempo do calendário, durações e suporte a vários idiomas.
Ele possui uma lista aparentemente interminável de plugins que permitem recursos adicionais, como suporte a fuso horário, recorrência e integração com o Twitter.
Informações do tutorial
Neste tutorial, vamos dar uma olhada no Moment.js. A seguir estão as coisas que vamos abordar.
- Fazendo referência ao Moment.js e exibindo saídas de data básica
- Exibindo datas formatadas
- Datas de análise
- Detectando datas inválidas
- Corrigindo datas inválidas
- Adicionando e subtraindo datas
Existem páginas de demonstração para quase todas as seções deste tutorial que demonstram o código que está sendo discutido. Como alternativa, você pode baixar todos os arquivos de demonstração associados a este tutorial como um arquivo ZIP.
Vamos mergulhar.
Fazendo referência ao Moment.js e exibindo saídas básicas
Para começar, você precisará fazer o download do Moment.js e referenciá-lo em seu documento HTML. Você também pode encontrar a biblioteca em cdnjs.com (uma CDN pública para projetos de código aberto). Basta pesquisar a biblioteca usando o termo “moment.js” .
A primeira coisa que faremos neste tutorial é fazer referência à biblioteca Moment.js. Então, para ter certeza de que está funcionando corretamente, vamos instanciar um momentobjeto e um objeto JavaScript Date, e então gerar seus valores. Veja a seguir como fazer referência à biblioteca Moment.js em seus documentos HTML, bem como instanciar e exibir os valores do momentobjeto e do objeto JavaScript Date.
<!DOCTYPE html> <html> <head> <!– reference Moment.js library –> <script src=”//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment. min.js” type=”text/javascript”></script> </head> <body> <h2>Data do momento</h2> <!– contêiner para saída do Moment.js –> <div id=” displayMoment”></div> <h2>JavaScript Date</h2> <!– container para saída JavaScript Date –> <div id=”displayJsDate”></div> <script type=”text/javascript”> (function() { // instancia um objeto moment var NowMoment = moment(); // instancia um objeto JavaScript Date var NowDate = new Date();// exibe o valor do objeto moment em #displayMoment divvar eDisplayMoment = document.getElementById(‘displayMoment’); eDisplayMoment.innerHTML = NowMoment; // exibe o valor do objeto Date em #displayJsDate div var eDisplayDate = document.getElementById(‘displayJsDate’); eDisplayDate.innerHTML = NowDate; })(); </script> </body> </html>
Nesse ponto, os comprimentos de código do objeto momentnativo e do Dateobjeto parecem no mesmo nível.
Exibindo datas formatadas
As coisas entre momente JavaScript Datemudam rapidamente, no entanto, quando queremos exibir até mesmo uma exibição de data simples e legível por humanos com o formato de ‘Ym-d’ (por exemplo, ‘2014-7-1’).
Usando JavaScript Date, este seria o nosso código.
// usa JavaScript Date para exibir a data atual em um div (#displayJsDate) var NowDate = new Date(); var meses = [‘janeiro’, ‘fevereiro’, ‘março’, ‘abril’, ‘maio’, ‘junho’, ‘julho’, ‘agosto’, ‘setembro’, ‘outubro’, ‘novembro’, ‘dezembro ‘]; var sDay = NowDate.getDate(); var sMonth = NowDate.getMonth() + 1; var sYear = NowDate.getFullYear(); var eDisplayDate = document.getElementById(‘displayJsDate’); eDisplayDate.innerHTML = sAno+’-‘+sMês+’-‘+sDia;
Moment.js torna nosso código mais sucinto.
// use Moment.js para exibir a data atual em um div (#displayMoment) var NowMoment = moment(); var eDisplayMoment = document.getElementById(‘displayMoment’); eDisplayMoment.innerHTML = NowMoment.format(‘AAAA-MD’);
Você notará que tivemos que adicionar muito código de configuração para nossa saída de formato de data específica na solução nativa e apenas um método simples chamado .format()na solução Moment.
O argumento de string que passamos para .format(), que é ‘YYYY-M-D’, é o formato que estamos solicitando à biblioteca Moment.js para retornar a data. O site Moment.js tem muitas opções de formato convenientemente listadas em uma tabela aqui:
Agora que estamos familiarizados com o processo de exibição e formatação da data atual, vamos seguir em frente.