Formatando datas com JavaScript

As datas são uma parte fundamental de todo sistema, seja exibindo a data atual em uma página da Web ou manipulando a entrada do usuário para agendar eventos.

Neste post, exploraremos várias técnicas para formatar datas em JavaScript, permitindo que você apresente as datas no formato desejado para seu aplicativo.

Como usar o objeto de data do JavaScript

Antes de mergulharmos na formatação de data, vamos nos familiarizar com o Date objeto JavaScript. Ele fornece métodos para trabalhar com datas e horas de forma eficaz.

Para criar uma nova instância de data, você pode usar o new Date() construtor.

Por exemplo:

const currentDate = new Date();
console.log(currentDate); 

// Tue Jun 01 2023 06:29:51 GMT-0300 (Horário Padrão de Brasília)

O código acima produzirá a data e hora atuais no formato padrão. No entanto, esse formato não é adequado para todos os casos de uso.

É por isso que precisamos formatar as datas para podermos extrair o que precisamos desse objeto de data.

Em JavaScript, não há sintaxe direta que forneça o formato esperado porque o formato de data varia com base no local, circunstância e assim por diante.

Métodos básicos de formatação de data em JavaScript

O JavaScript fornece alguns métodos integrados para formatar datas de maneira conveniente. Vamos dar uma olhada em alguns desses métodos:

1. toDateString() : Este método converte a parte da data de um Date objeto em um formato de string legível por humanos.

Por exemplo:

const date = new Date();
console.log(date.toDateString());

// Tue Jun 01 2023

2. toISOString() : Este método converte um Date objeto em uma representação de string seguindo o formato ISO 8601.

Por exemplo:

const date = new Date();
console.log(date.toISOString());

// 2023-06-01T09:31:35.679Z

3. toLocaleDateString() : Este método retorna uma string que representa a parte da data de um Dateobjeto usando as convenções locais do sistema.

Por exemplo:

const date = new Date();
console.log(date.toLocaleDateString());

// 01/06/2023

Este formato pode variar conforme a localidade do sistema. 

Formatação de data personalizada em JavaScript

Embora os métodos básicos de formatação possam ser úteis em determinados cenários, muitas vezes você pode precisar de mais controle sobre o formato de data.

O JavaScript fornece algumas maneiras de obter formatação de data personalizada:

1. Concatenação de String : Uma abordagem é concatenar manualmente os diferentes componentes de uma data usando manipulação de string.

Por exemplo:

const date = new Date();
const formattedDate = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
console.log(formattedDate);

// 1-6-2023

Você pode manipular isso como quiser e criar formas mais criativas de representar datas. 

2. Intl.DateTimeFormat : o objeto do JavaScript Intloferece recursos de formatação poderosos por meio do objeto DateTimeFormat . Ele fornece suporte de localização e várias opções para formatar datas e horas.

Aqui está um exemplo:

const date = new Date();
const formatter = new Intl.DateTimeFormat('pt-br', { dateStyle: 'short' });
const formattedDate = formatter.format(date);
console.log(formattedDate);

// 01/06/2023

Usando Intl.DateTimeFormat, você pode especificar a localidade desejada e várias opções para formatar datas precisamente conforme necessário. Existem mais opções que você pode usar na documentação oficial .

Como lidar com fusos horários ao trabalhar com datas

Ao trabalhar com datas, é essencial considerar os fusos horários, especialmente ao lidar com aplicativos globais ou informações sensíveis ao tempo.

O JavaScript fornece métodos para lidar com fusos horários de forma eficaz:

1. Time Zone Offset : O método getTimezoneOffset() do Dateo bjeto retorna a diferença em minutos entre o fuso horário local e o UTC. Você pode usar esse deslocamento para ajustar datas para fusos horários específicos.
2. Exibindo fusos horários : Para exibir as informações de fuso horário ao lado da data, você pode usar o método toLocaleString() com as opções apropriadas.

Por exemplo:

const date = new Date();
const formattedDate = date.toLocaleString('en-US', { timeZoneName: 'short' });
console.log(formattedDate);

// 01/06/2023, 6:36:25 BRT

Padrões comuns de formatação de data

Certos padrões de formatação de data são comumente usados. Aqui estão alguns exemplos:

1. Formato de data específico: para exibir uma data em um formato específico, como DD/MM/YYYY, você pode usar Intl.DateTimeFormatcom as opções apropriadas.

Por exemplo:

const date = new Date();
const formatter = new Intl.DateTimeFormat('en-US', { day: '2-digit', month: '2-digit', year: 'numeric' });
const formattedDate = formatter.format(date);
console.log(formattedDate);

// 01/06/2023

2. Formato de hora : Para formatar a parte da hora de uma data, você pode usar as opções hour, minutee second.

Por exemplo:

const date = new Date();
const formatter = new Intl.DateTimeFormat('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
const formattedTime = formatter.format(date);
console.log(formattedTime);

// 06:39:43

Como lidar com a entrada de data

Além de formatar as datas para exibição, é essencial lidar com a entrada do usuário para datas de forma eficaz. Aqui vão algumas considerações:

1. Analisando a entrada do usuário : Use o método Date.parse() ou bibliotecas externas como Moment.js ou Luxon para analisar as datas fornecidas pelo usuário em Dateobjetos válidos.
2. Validando a entrada do usuário : implemente mecanismos de validação para garantir que a entrada do usuário esteja de acordo com o formato de data esperado. Expressões regulares ou bibliotecas externas podem ajudar nisso.