FalaDevs – Artigos e Tutoriais de Programação | Dicas e Técnicas Avançadas

Como Inicializar uma Data com Fuso Horário Específico em JavaScript

Fala Devs, beleza?

Trabalhar com datas e fusos horários em JavaScript pode ser desafiador, mas é possível ajustar a exibição das datas com base em fusos horários específicos usando o método toLocaleString(). Neste artigo, você vai aprender a inicializar uma data com fuso horário em JavaScript e entender como lidar com o objeto Date.

Utilizando o método toLocaleString() para inicializar uma data com fuso horário

O método toLocaleString() permite ajustar a exibição de uma data com base no fuso horário desejado. Ele aceita parâmetros como o locale (código de idioma) e a timeZone (fuso horário) para formatar a data de acordo com as suas necessidades.

const data = new Date();

// Exibir data em fusos horários diferentes
console.log(
  data.toLocaleString('pt-BR', {
    timeZone: 'America/Sao_Paulo',
  })
); // "22/09/2024, 17:19:50"

console.log(
  data.toLocaleString('de-DE', {
    timeZone: 'Europe/Berlin',
  })
); // "22.9.2024, 22:19:50"
JavaScript

Criando um Objeto Date com Fuso Horário Específico

Apesar do objeto Date do JavaScript não armazenar o fuso horário, podemos criar uma função que ajusta a exibição da data e hora para o fuso horário desejado. Aqui está um exemplo de como fazer isso:

function alterarFusoHorario(data, fusoHorario) {
  return new Date(data.toLocaleString('en-US', {
      timeZone: fusoHorario,
   }));
}

const dataSaoPaulo = alterarFusoHorario(new Date(), 'America/Sao_Paulo');
console.log(dataSaoPaulo); // "2024-09-22T11:04:32.000Z"

const dataBerlim = alterarFusoHorario(new Date(), 'Europe/Berlin');
console.log(dataBerlim); // "2024-09-22T16:04:32.000Z"
JavaScript

A função alterarFusoHorario() recebe um objeto Date e um fuso horário, retornando um novo objeto Date com a data ajustada para o fuso horário especificado.

Entendendo o Objeto Date e Fuso Horário no JavaScript

O JavaScript utiliza um timestamp (registro de tempo) que conta os milissegundos desde 1º de janeiro de 1970 (UTC). O objeto Date não armazena informações de fuso horário, o que significa que o tempo exibido depende do fuso horário local do usuário.

Portanto, para trabalhar com diferentes fusos horários, o ideal é formatar a data com o método toLocaleString().

Formatando a Exibição de Datas com Propriedades Personalizadas

O método toLocaleString() também permite formatar a data de diferentes maneiras, configurando propriedades adicionais no options object. Aqui estão algumas dessas propriedades:

  • dateStyle: Define o estilo da data (pode ser ‘full’, ‘long’, ‘medium’, ‘short’).
  • timeStyle: Define o estilo da hora.
  • timeZoneName: Exibe o nome do fuso horário (pode ser ‘short’ ou ‘long’).
const data = new Date();

console.log(
  data.toLocaleString('pt-BR', {
    timeZone: 'America/Sao_Paulo',
    dateStyle: 'full',
    timeStyle: 'full',
  })
); // "domingo, 22 de setembro de 2024 às 17:32:17 Horário Padrão de Brasília"
JavaScript

Além disso, você pode ajustar a exibição dos componentes de data e hora com valores de dois dígitos:

const data = new Date();

console.log(
  data.toLocaleString('pt-BR', {
    timeZone: 'America/Sao_Paulo',
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    timeZoneName: 'short',
  })
); // "22/09/2024, 17:32:43 BRT"
JavaScript

Neste exemplo, ao definir os valores de month, day, hour, minute e second como ‘2-digit’, garantimos que os valores sejam exibidos com dois dígitos, mesmo que sejam menores que 10.

Melhor Prática para Armazenamento de Datas

É recomendado que as datas sejam armazenadas em formato UTC (ou em uma string no formato ISO 8601) no banco de dados, e somente ajustadas ao fuso horário local no momento da exibição. Isso garante consistência ao lidar com usuários de diferentes partes do mundo.

Exceção: Se o seu sistema é usado exclusivamente por pessoas de um único fuso horário, como em um negócio local, pode ser vantajoso armazenar as datas já ajustadas ao fuso horário local.

Conclusão

Manipular fusos horários no JavaScript é simplificado com o uso do método toLocaleString(). Embora o objeto Date não armazene diretamente um fuso horário, você pode formatar a exibição da data de acordo com suas necessidades. Lembre-se de armazenar as datas em UTC e ajustá-las localmente ao exibi-las para o usuário, a menos que todos estejam no mesmo fuso horário.