Guia de Formatação de Datas em JavaScript: Como Formatar Datas Corretamente com Exemplos

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução: Por que a Formatação de Datas é Importante em JavaScript

Em desenvolvimento web usando JavaScript, exibir e gerenciar datas e horas é essencial. Por exemplo, aplicativos de calendário e sistemas de gerenciamento de logs exigem que os dados de data e hora sejam formatados corretamente. No entanto, o manuseio de datas em JavaScript pode parecer um pouco complexo para iniciantes.

Neste guia, apresentamos técnicas práticas e exemplos de código para ajudá-lo a dominar a formatação de datas em JavaScript. Desde o uso básico do objeto Date até o uso avançado de Intl.DateTimeFormat, e até comparações de bibliotecas externas, este artigo oferece uma explicação abrangente.

Cenários Comuns Onde a Formatação de Datas é Necessária

1. Exibição de dados em aplicações web:

• Suportando usuários em diferentes calendários e fusos horários.

1. Gerenciamento de logs e depuração:

• Registrando timestamps para logs de erro e ações de usuário.

1. Suporte multilíngue:

• Ajustando formatos de exibição de datas para usuários internacionais.

Benefícios para os Leitores

Ao ler este guia, você adquirirá as seguintes habilidades:

• Entender como trabalhar com o objeto Date básico.
• Exibição flexível de datas usando formatação manual e métodos incorporados.
• Codificação eficiente com a ajuda de bibliotecas externas de datas.

Na próxima seção, examinaremos mais de perto os fundamentos do objeto Date do JavaScript. Compreender isso permitirá que você avance suavemente para tópicos mais avançados posteriormente.

2. Conceitos Básicos de Manipulação de Datas em JavaScript: O que é o Objeto Date?

Em JavaScript, o objeto Date é usado para gerenciar datas e horas. Entender esse objeto é o primeiro passo para lidar corretamente com a formatação de datas. Esta seção explica o uso básico do objeto Date.

2.1 Como Criar um Objeto Date

Um objeto Date pode ser criado das seguintes maneiras.

1. Obter a data e hora atuais

   const today = new Date();
   console.log(today); // Outputs the current date and time
   

2. Definir uma data e hora específicas

   const customDate = new Date(2024, 11, 28); // Year, month (starts from 0), day
   console.log(customDate); // December 28, 2024
   

3. Criar uma data a partir de uma string

   const dateFromString = new Date('2024-12-28');
   console.log(dateFromString); // Date converted from ISO format
   

4. Criar uma data a partir de um timestamp

   const timestampDate = new Date(1703740800000); // Milliseconds
   console.log(timestampDate); // Date represented by the timestamp
   

2.2 Métodos para Recuperar Componentes de Data e Hora

O objeto Date fornece métodos para recuperar componentes individuais de data e hora.

2.3 Trabalhando com Fusos Horários e UTC

Obter hora local:

const date = new Date();
console.log(date.toString()); // Local time

Obter hora UTC:

console.log(date.toUTCString()); // UTC-based time

Obter deslocamento de fuso horário:

console.log(date.getTimezoneOffset()); // -540 (in minutes, for Japan Standard Time)

Resumo

Nesta seção, explicamos os conceitos básicos do objeto Date em JavaScript, incluindo como criar datas e recuperar ou manipular componentes de data.

Na próxima seção, aprofundaremos nos métodos específicos para formatar datas em JavaScript.

3. Três Formas de Formatar Datas em JavaScript

JavaScript oferece várias maneiras de formatar datas em diferentes representações. Nesta seção, explicamos três abordagens em detalhe: formatação manual, métodos incorporados e opções avançadas de formatação.

3.1 Formatação Manual: Do Básico ao Uso Prático

Exemplo Simples de Formato Personalizado

const date = new Date();
const year = date.getFullYear(); // Year
const month = ('0' + (date.getMonth() + 1)).slice(-2); // Month (zero-padded)
const day = ('0' + date.getDate()).slice(-2); // Day (zero-padded)

const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // Example: 2024-12-28

3.2 Locale-Aware Formatting with toLocaleDateString()

Basic Usage

const date = new Date();
console.log(date.toLocaleDateString('ja-JP')); // Example: 2024/12/28

Customization with Options

const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
console.log(date.toLocaleDateString('ja-JP', options)); // Example: 2024/12/28

3.3 Advanced Customization: Using Intl.DateTimeFormat

Basic Usage

const date = new Date();
const formatter = new Intl.DateTimeFormat('ja-JP', { dateStyle: 'full' });
console.log(formatter.format(date)); // Example: Saturday, December 28, 2024

Summary

In this section, we introduced three different ways to format dates in JavaScript. In the next section, we will explain how to improve efficiency by using external libraries for date handling.

4. Using External Libraries: Comparing Moment.js, date-fns, and Day.js

While JavaScript’s built-in date methods are powerful, using external libraries can make complex formatting and processing more concise and efficient.

4.1 Moment.js: A Proven Library for Legacy Systems

Basic Usage

const moment = require('moment'); // Import in a Node.js environment
const now = moment(); // Current date and time
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // Example: 2024-12-28 14:30:45

4.2 date-fns: A Modular Library for Modern Projects

Basic Usage

import { format, addDays } from 'date-fns';

const now = new Date();
console.log(format(now, 'yyyy-MM-dd')); // Example: 2024-12-28

const nextWeek = addDays(now, 7);
console.log(format(nextWeek, 'yyyy-MM-dd')); // Example: 2025-01-04

4.3 Day.js: A Lightweight, Moment-Compatible Modern Library

Basic Usage

const dayjs = require('dayjs');

const now = dayjs();
console.log(now.format('YYYY-MM-DD')); // Example: 2024-12-28

const nextWeek = now.add(7, 'day');
console.log(nextWeek.format('YYYY-MM-DD')); // Example: 2025-01-04

4.4 Library Comparison Table

Summary

In this section, we compared popular external libraries that simplify date handling in JavaScript. In the next section, we will introduce practical application examples using these formatting techniques.

5. Practical Examples: Applications Using Date Formatting

5.1 Displaying Dates in a Calendar Application

Implementation Example

const selectedDate = new Date(); // Date selected by the user

const formattedDate = selectedDate.toLocaleDateString('ja-JP', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long'
});

console.log(`Selected date: ${formattedDate}`); 
// Example: Selected date: Saturday, December 28, 2024

5.2 Managing Timestamps in Log Files

Implementation Example

const logTime = new Date().toISOString(); // Get date and time in ISO format
console.log(`[LOG] ${logTime}: Process started`);
// Example: [LOG] 2024-12-28T05:30:00.000Z: Process started

5.3 Validating and Formatting Form Input Dates

Implementation Example

function formatInputDate(inputDate) {
  const date = new Date(inputDate); // Convert input string to a Date object

  if (isNaN(date)) {
    console.log('Invalid date format.');
    return null;
  }

  return date.toLocaleDateString('ja-JP', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
}

console.log(formatInputDate('2024-12-28')); // Example: 2024/12/28

Summary

In this section, we introduced practical examples of using date formatting in JavaScript, including calendar displays, log management, and form validation. In the next section, we address frequently asked questions (FAQ) and provide solutions to common issues.

6. Frequently Asked Questions (FAQ)

Q1: Como posso exibir datas e horas no formato ISO?

Resposta

O formato ISO é um padrão internacional para representação de data e hora e é amplamente usado em bancos de dados e comunicações de API. Em JavaScript, você pode usar o método toISOString() do objeto Date.

Código de Exemplo

const date = new Date();
console.log(date.toISOString()); // Example: 2024-12-28T05:30:00.000Z

Q2: Como devo lidar com a diferença entre horário UTC e horário local?

Resposta

Por padrão, o JavaScript usa o horário local, mas também fornece métodos para converter de e para UTC.

Código de Exemplo

Converter horário local para UTC:

const date = new Date();
console.log(date.toUTCString()); // Example: Sat, 28 Dec 2024 05:30:00 GMT

Converter UTC para horário local:

const date = new Date('2024-12-28T05:30:00Z'); 
console.log(date.toString()); 
// Example: Sat Dec 28 2024 14:30:00 GMT+0900 (Japan Standard Time)

Q3: Qual a maneira mais fácil de lidar com preenchimento de zeros na formatação de datas?

Resposta

function zeroPad(number) {
  return number.toString().padStart(2, '0');
}

const date = new Date();
const formattedDate = `${date.getFullYear()}-${zeroPad(date.getMonth() + 1)}-${zeroPad(date.getDate())}`;
console.log(formattedDate); // Example: 2024-12-28

Resumo

Nesta seção, abordamos perguntas frequentes sobre formatação de datas em JavaScript e fornecemos soluções práticas. Na próxima seção, concluiremos o artigo com um resumo e um plano de ação para aplicar o que você aprendeu.

7. Conclusão e Próximos Passos Práticos

7.1 Principais Aprendizados deste Artigo

1. Fundamentos do Objeto Date em JavaScript: Explicamos como criar objetos Date e usar métodos para recuperar e manipular valores de data e hora.
2. Três Abordagens de Formatação de Data: Formatação manual, métodos nativos e uso de bibliotecas externas.
3. Casos de Uso Práticos: Exemplos reais como calendários, gerenciamento de logs e validação de formulários.
4. FAQ: Desafios comuns e soluções comprovadas para formatação de datas.

7.2 Plano de Ação para Implementação Prática

1. Teste os Exemplos de Código: Execute o código de exemplo em um editor online ou no seu ambiente de desenvolvimento local para aprofundar seu entendimento.
2. Aplique em Projetos Reais: Integre a formatação de datas em projetos reais adicionando recursos de calendário ou funcionalidades de gerenciamento de logs.
3. Compare Bibliotecas: Experimente Moment.js, date-fns e Day.js para determinar qual melhor se adapta aos requisitos do seu projeto.

7.3 Considerações Finais

A formatação de datas em JavaScript varia de operações simples a personalizações avançadas e bibliotecas externas poderosas. Use este guia como referência para implementar um tratamento de datas eficiente, flexível e sustentável em suas aplicações.