A formatação de datas em JavaScript é uma habilidade fundamental ao desenvolver aplicações web. Neste tutorial, você aprenderá como criar, manipular e formatar datas usando JavaScript puro, além de explorar opções avançadas com duas bibliotecas externas populares.
Usando JavaScript Puro para Formatar Datas
Criando um Objeto Date
Primeiro, vamos criar um objeto Date para representar uma data específica:
// Criando um objeto Date para a data atual let dataAtual = new Date(); // Criando um objeto Date para uma data específica (ano, mês, dia) let dataEspecifica = new Date(2024, 6, 14); // Mês é zero-indexado, então 6 representa julho
Formatando a Data Manualmente
JavaScript não possui um método integrado para formatar datas diretamente, então podemos criar uma função para formatar a data no formato dia/mês/ano:
function formatarData(data) {
let dia = data.getDate();
let mes = data.getMonth() + 1; // Mês é zero-indexado
let ano = data.getFullYear();
// Adicionando zero à esquerda se necessário
if (dia < 10) dia = '0' + dia;
if (mes < 10) mes = '0' + mes;
return `${dia}/${mes}/${ano}`;
}
// Exemplo de uso
let hoje = new Date();
console.log(formatarData(hoje)); // Saída: "14/07/2024"Usando Bibliotecas Externas para Formatar Datas
Moment.js
O moment.js é uma biblioteca popular para manipulação de datas que oferece muitos recursos avançados, formatação flexível e suporte a localização.
Instalação via CDN
<!-- Incluindo Moment.js via CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
Exemplo de Uso
// Criando um objeto Moment para a data atual
let dataMoment = moment();
// Formatando a data usando Moment.js
let dataFormatada = dataMoment.format('DD/MM/YYYY');
console.log(dataFormatada); // Saída: "14/07/2024"Date-fns
O date-fns é outra biblioteca popular que oferece funções simples e modulares para manipulação de datas.
Instalação via CDN
<!-- Incluindo date-fns via CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/2.23.0/date-fns.min.js"></script>
Exemplo de Uso
// Criando um objeto Date usando date-fns let dataFns = new Date(2024, 6, 14); // Mês é zero-indexado, então 6 representa julho // Formatando a data usando date-fns let dataFormatadaFns = format(dataFns, 'dd/MM/yyyy'); console.log(dataFormatadaFns); // Saída: "14/07/2024"
Conclusão
Formatar datas em JavaScript é crucial para muitas aplicações web. Com este tutorial, você aprendeu como criar objetos Date, formatar datas manualmente e explorar opções avançadas com as bibliotecas moment.js e date-fns. Espero que este tutorial seja útil! Se tiver alguma dúvida ou sugestão, sinta-se à vontade para perguntar.
Sugestão de Cursos
Descubra o caminho para se tornar um especialista em programação web. Aprenda HTML, CSS, JavaScript e os principais frameworks nesta jornada emocionante. Com instrutores experientes e materiais práticos, você desenvolverá habilidades práticas para criar sites impressionantes e aplicativos interativos. Impulsione sua carreira na indústria de tecnologia e abra portas para oportunidades de emprego lucrativas. Garanta sua vaga hoje mesmo e inicie sua jornada para se tornar um desenvolvedor web de sucesso.
Método Para Aprender a Programar do Absoluto ZERO com Node.js, React e React Native.
As tecnologias ensinadas no curso são responsáveis por muitas vagas no mercado de trabalho.
Além da alta demanda, os salários vão de R$47.000,00 até R$197.000,00 anuais tendo empresas que possibilitam o trabalho remoto e até vagas Internacionais.
Para que você possa estar apto a preencher uma dessas vagas eu vou te apresentar o passo a passo para você se tornar um verdadeiro expert nessas tecnologias.
O curso te dará o passo a passo de como criar estruturar de um sistema do zero com Node.js, React e React Native.