12

Tenho o seguinte trecho:

let data = new Date();
console.log(data); // saída: Fri Oct 18 2019 08:23:27 GMT-0300 (Horário Padrão de Brasília)

Ao realizar a requisição com o HttpClient o Angular adiciona 3 horas a mais, logo, enviando para o backend o seguinte: 2019-10-18T11:23:27.756Z. Já tenho o locale configurado da seguinte forma no AppModule:

import localePT from '@angular/common/locales/pt';
registerLocaleData(localePT);

Já configurei o LOCALDE_ID e também não resolveu meu problema. Alguma ideia de como resolver?

1
  • Use LocalDateTime.now() do java 8.
    – Collura
    Commented 18/03/2020 às 1:26

5 Respostas 5

20

O "Z" no final de 2019-10-18T11:23:27.756Z indica que esta data e hora está em UTC.

Já ao imprimir o Date, repare que ele possui GMT-0300, que indica 3 horas atrás de UTC.

Ou seja, ambos representam o mesmo instante. Esse é um ponto meio confuso, mas o Date do JavaScript, apesar do nome, não representa um único valor de data e hora (um único dia, mês, ano, hora, minuto e segundo específico).

Ela na verdade representa um timestamp: a quantidade de milissegundos desde o Unix Epoch. Este valor representa um único instante, um ponto específico na linha do tempo. Só que um mesmo timestamp pode representar uma data e hora diferentes, dependendo do fuso horário (basta pensar que agora, neste exato momento, em cada parte do mundo o "dia de hoje" e o "horário atual" podem ser diferentes, dependendo do fuso horário em que você está).

Sendo assim, ao imprimir um Date com console.log, ele te mostra o valor considerando o timezone do browser. Mas ao enviar o Date em uma requisição, ele está convertendo-a para UTC. Mas o valor do Date (o seu timestamp, o instante ao qual ela corresponde) não foi alterado.

No caso, bastaria o backend pegar esta data e converter para o timezone correto (e cada linguagem possui suas formas de fazer isso).

O locale controla as configurações de idioma e localização, mas não interfere no fuso horário utilizado, são coisas diferentes. Eu posso usar o locale correspondente ao idioma português, mas mostrar a data em um fuso horário de qualquer outro país, uma coisa não está relacionada a outra.


Ao mudar o valor do timestamp, como sugeria outra resposta (que foi apagada), você estará mudando o instante ao qual a data corresponde. Pode até "funcionar", mas não é o ideal, dependendo do que você quer fazer.

Para entender melhor, uma analogia. Agora no Brasil são 10:20 e em Londres são 14:20 (os ingleses estão em horário de verão, daí a diferença de 4 horas). Imagine que meu computador está erroneamente configurado com o fuso de Londres, então ele mostra 14:20.

Para que ele mostre o horário correto, eu posso fazer duas coisas:

  • mudar a configuração do computador para o Horário de Brasília
  • atrasar o relógio em 4 horas

Em ambos os casos, o horário passará a ser mostrado como 10:20, mas a segunda opção é pior, porque agora meu relógio está indicando um instante no passado. É isso que acontece quando você manipula o valor do timestamp, e esse é o erro da outra resposta. Apesar do valor mostrado estar "correto", você criou um Date correspondente a um instante diferente, e dependendo do que você vai fazer com a data, pode dar resultados incorretos.

Além disso, a diferença nem sempre será de 4 horas. Quando Londres não está em horário de verão, a diferença é de 3 horas, exceto que quando o Horário de Brasília está em horário de verão, a diferença é de duas horas (mas já houve períodos em que ambos estão em horário de verão, e a diferença volta a ser de 3 horas, já que em muitos anos, o horário de verão no Brasil começou no início de outubro, e na Inglaterra terminou no final de outubro, então durante alguns dias ambos estavam em horário de verão).

No caso específico do Brasil, este ano não teremos horário de verão, mas como isso é algo definido pelo governo, nada garante que isso não mudará no futuro. Por isso manipular o valor do timestamp ainda tem essa outra desvantagem: não estará sincronizado com as mudanças do mundo real. Você teria que consultar as informações do timezone para saber se usa 2 ou 3 horas para o seu cálculo.

Ou seja, usar valores fixos para fazer esse cálculo é extremamente propenso a erros, e o ideal é sempre usar o timezone correto.


Infelizmente o JavaScript não possui uma maneira decente de converter entre fuso horários. O máximo que você pode fazer é obter os valores de data e hora no timezone do browser ou em UTC. Se quiser no mesmo formato acima, mas usando o timezone do browser, terá que fazer manualmente:

function pad(value) {
    return value.toString().padStart(2, 0);
}
let d = new Date();
console.log(`${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`);

A diferença é que não terá o Z no final, pois não está mais em UTC. Nesse caso, você terá que assumir que o backend sabe qual o timezone em que se encontra. Você ainda pode usar d.getTimezoneOffset(), que retorna a diferença em minutos com relação a UTC. No caso do Horário de Brasília, o retorno é 180 (ou 120 quando está em horário de verão). Se quiser, pode mandar esta informação separadamente, para que o backend possa fazer a conversão corretamente.

Repare também que tive que somar 1 no mês, pois no JavaScript os meses são indexados em zero (janeiro é zero, fevereiro é 1, etc).


Moment.js

Se quiser, pode usar o Moment.js, juntamente com o Moment Timezone, para manipular as datas no timezone correto:

let d = moment.tz('America/Sao_Paulo');
console.log(d.format()); //2019-10-18T10:32:31-03:00
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data.min.js"></script>

Assim, ela manda a data no timezone correto (ex: 2019-10-18T10:32:31-03:00), sem depender do timezone do browser, e você pode manipular da maneira que achar melhor no backend.

Os nomes dos timezones (como America/Sao_Paulo) são definidos pela IANA e estão sempre sofrendo constantes atualizações (ela acompanha as mudanças de horário de verão do mundo todo, para que você não precise se preocupar com isso: basta usar o timezone correto e a API faz o resto). Com o Moment.js você pode ter uma lista dos timezones disponíveis usando moment.tz.names():

console.log(moment.tz.names());
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data.min.js"></script>


Angular

Sobre o Angular, ele parece usar JSON.stringify para converter o Date, ao enviá-lo em um HTTP request carece de fontes, mas estou procurando.

De qualquer forma, fiz um teste rápido, seguindo a ideia desta resposta:

// aproveitando a função pad() já vista anteriormente
Date.prototype.toJSON = function() {
    return `${this.getFullYear()}-${pad(this.getMonth() + 1)}-${pad(this.getDate())}T${pad(this.getHours())}:${pad(this.getMinutes())}:${pad(this.getSeconds())}`;
}

Ao fazer isso, todas as datas enviadas via HttpClient são convertidas usando a função acima (que você pode adaptar para o que precisar).

Evidentemente que isso mudará para todas as instâncias de Date do seu projeto (que pelos comentários abaixo, parece ser o caso).

6
  • Olá! Obrigado pela explicação detalhada. Mas ainda assim, a alteração no backend fica descartada pois, o endpoint é chamado por terceiros também, o que implicaria em uma padronização indesejada. No Angular, se eu fizer algo como a formatação como no seu exemplo do uso do "pad()" eu teria outro problema que é em casos onde tenho um array de objeto que contém o campo de data, tendo que percorrer-lo todo, campo a campo alterando. A questão é como fazer isso genérico e global para o projeto. Caso não fui claro me avise por favor. Commented 18/10/2019 às 14:06
  • @MatheusMaske O que realmente importa é que a data em si (o instante ao qual ela se refere) não foi mudada, e a informação completa está sendo enviada (data, hora e a indicação que está em UTC), então quem consumir esses dados saberá o instante correto que aquela data representa. É responsabilidade de cada um interpretar corretamente essa informação (se está em UTC, não pode tratar como se estivesse em outro fuso horário, por exemplo). Se alguém assume que uma data em UTC está no horário de Brasília (ou qq outro fuso), a culpa não é de quem manda...
    – hkotsubo
    Commented 18/10/2019 às 14:11
  • @MatheusMaske Eu não tenho certeza do que vou falar, mas acho que o Angular usa JSON.stringifypara transformar o Date em string, quando vai enviar um request HTTP, então bastaria fazer algo assim: stackoverflow.com/a/31104671 - aí todas as datas seriam mudadas para o formato específico (vc poderia colocar a opção com pad na função, por exemplo). Não testei, mas acho que vale a tentativa...
    – hkotsubo
    Commented 18/10/2019 às 14:18
  • @MatheusMaske Fiz um teste rápido e pelo jeito alterar o prototype de Date parece funcionar. Atualizei a resposta e coloquei essa opção no final
    – hkotsubo
    Commented 18/10/2019 às 14:58
  • 1
    Realmente alterou com o override do prototype do Date, e é este mesmo o caso. Muito obrigado @hkotsubo Commented 18/10/2019 às 16:25
10

Vou discordar de todas respostas, sobre tentar resolver no lado cliente.

Apesar de já dito, o horário está em UTC, logo isto é o horário UNIVERSAL, você não precisa converte-lo, isto seria melhor tratado no back-end, mas vou lhe adiantar, de preferência sempre grave em UTC mesmo no banco, txts, ou qualquer log, só no momento da leitura que você irá fazer o ajuste para a timezone do usuário.

Agora para você ter uma melhor noção do problema, por exemplo se passar um horário UTC assim você ainda sim irá obter o horário ajustado conforme o cliente:

var data = new Date('2019-10-18T11:23:27.756Z');
data.toString();

Vai retornar algo como:

Fri Oct 18 2019 08:23:27 GMT-0300 (Horário Padrão de Brasília)

Imagine que um usuário está em São Paulo e grava no banco com horário do seu computador ao invés de UTC no banco, ai se tiver um usuário em Rondônia e for ler a mensagem ele vai pensar que a mensagem foi enviada uma hora no futuro, sim vai parecer que a mensagem veio do futuro

de volta do futuro

Agora imagine uma situação pior que uma simples mensagem, imagine que uma pessoa agenda algo para ocorrer em X horário e isto tem que servir para todos usuários, por exemplo uma agenda compartilhada para usuários para iniciar uma vídeo conferencia, se você gravar no banco de dados com o horário -3 (da maioria dos estados do Brasil) quem for -4 (como Rondônia, Roraima, Amazonas) irá chegar uma hora atrasado, ou seja depois da conferencia ter começado.

Então se for enviar algo envie exatamente como "esta" (com UTC), isto se for necessário enviar a partir do cliente-side, porque na maioria das vezes não é, é melhor confiar no back-end, os momento que seria necessário a partir do cliente será acaso o usuário selecionar um horário para agendar algo.


Não confie no cliente (side)

Digo isto porque simplesmente ao confiar a tarefa para o lado aonde esta o JavaScript, ou seja o webView ou navegador você estará confiando no horário da maquina/computador/celular do cliente, isto mesmo se o horário estiver errado por algum problema com a operadora da pessoa (ocorre um problema assim no ano retrasado com diversos celulares e até servidores no Brasil) ou problema de bateria no computador (uma bateria pequena que vai na placa mãe) você ficará sujeito a receber horários incorretos, então se puder simplesmente evitar receber horários vindo do cliente e obter o horário no lado do servidor será muito mais garantido.

Até mesmo se for um agendamento que o usuário precisa informar a hora você pode checar isto no lado do servidor, imaginando que ele tem 2 campos (isto é uma requisição HTTP POST de exemplo, sites usam HTTP):

POST /agendar HTTP/1.1
Content-Type: application/x-www-form-urlencoded

dia=2019/12/01&hora=09:00

Você preferencialmente teria que ter um terceiro campo ou enviar isto junto a requisição no @angular/common/http dizendo a timezone local/cliente e então no servidor ajustar para UTC estes dados recebidos.

POST /agendar HTTP/1.1
Content-Type: application/x-www-form-urlencoded

dia=2019/12/01&hora=09:00&timezone=180

180 é o -3:00 vindo da função Date.getTimezoneOffset()

E mesmo assim é complicado confiar no cliente, porque você não pode ter a certeza do computador do cliente estar "sincronizado" com a timezone, você pode até optar por trabalhar tudo como:

America/Sao_paulo

Ou:

America/Brasilia

Mas vai ter que ter em mente que se for exibir isto para outras timezones, lembre-se o Brasil tem 4 zonas diferentes:

  • UTC -5: Acre Time
  • UTC -4: Amazon Time
  • UTC -3: Brasília Time
  • UTC -2: Fernando de Noronha Time (este estão Fernando de Noronha e o Trindade e Martim Vaz, mas claro que neste caso duvido que alguém vá trabalhar lá)

Zonas horárias brasil

Agora imagine ajustar a partir do horário local para outras timezones, então pergunte a si mesmo, "é mais fácil contar a partir do zero ou a partir do 21?"

Fonte da imagem: https://commons.wikimedia.org/wiki/File:Standard_Timezones_of_Brazil.svg


Trabalhando com BRT

Sim você poderia trabalhar com BRT (Brazil Timezone) ao invés de UTC, porque assim o BRT seria a zona zero, sendo assim você teria que trabalhar desta forma:

  • BRT –4: ACT (Hora do Acre)
  • BRT –3: AMT (Hora do Amazonas)
  • BRT 0: BRT (Hora de Brasília)
  • BRT +1: FNT (Hora de Fernando de Noronha)

Pode funcionar por um bom tempo, mas se por algum motivo o horário principal BRT mudar então você poderá ter alguns problemas, lembrando que você ainda terá que configurar banco e back-end, e os dados enviados ao front-end ainda terão que ser ajustados, o que será muito mais trabalhoso.

12
  • 1
    Vale lembrar que até segunda ordem o horário de verão foi revogado em todo o território brasileiro. Se algum dia alguma pessoa do executivo nacional mudar de ideia, não se esqueça de se adaptar Commented 22/10/2019 às 16:37
  • 1
    @JeffersonQuesado ou melhor, faça o que eu disse na resposta, não confie no cliente, evite ao máximo que puder, somente na leitura (SELECT ... FROM) ajuste o horário ou no front mesmo, tem coisa que nem precisa ser gravada. (ps: esse é o intuito da resposta ;))
    – Syzoth
    Commented 22/10/2019 às 16:41
  • Eu acredito que entendi. Mas estou com uma dúvida: como irei identificar corretamente, o timezone do cliente para exibir a hora correta? Por exemplo: tenho um sistema online, meu servidor fica em Sao_Paulo. Será acessado de diversas partes do mundo, e aí? Como ajusto a hora para exibição? Porque terei que identificar de onde está sendo feito o acesso para subtrair ou adicionar ou manter as horas. Se eu pegar do cliente, poderá estar errado, e aí iria calcular errado também!
    – rbz
    Commented 26/02/2020 às 13:52
  • @rbz não precisa identificar na hora que ler, você baixa em "zona 0" mesmo, ou como as pessoas chamam "UTC" e então no lado cliente você aplica, se for em JavaScript, poderia receber em : var x = new Date; x.setTime(<?php echo $segundosUnixTime; ?>); console.log(x);, mas isso é um exemplo bem superficial é claro, se trouxer um "timestamp" como January 1, 2020, 10:30:00 UTC na variavel e passar diretamente new Date("<?php $timestamp; ?>"); também irá trabalhar, outro exemplo seria trazer via XmlHttpRequest (se necessário, se já for do ambiente) ...
    – Syzoth
    Commented 26/02/2020 às 14:13
  • ... e aplicar (supondo que traga um JSON que seja uma série de objetos com datas) var req = new XMLHttpRequest(); req.responseType = 'json'; req.open('GET', url, true); req.onload = function() { var resposta = req.response; console.log(new Date(resposta[0].date)); /*supondo que exista um objeto no indice zero e que receba um timestamp semelhante January 1, 2020, 10:30:00 UTC*/ }; req.send(null); ... @rbz na verdade isso expliquei logo no começo da resposta, aonde falo de var data = new Date('2019-10-18T11:23:27.756Z');, mas percebo que preciso editar com um exemplo pratico
    – Syzoth
    Commented 26/02/2020 às 14:13
1

Tire o Z no final, ou ponha -00:00 (caso não queira nenhum timezone):

ex.: new Date("2021-05-21T00:00:00.000") ou

new Date("2021/05/21 00:00 -00:00")

Caso esteja utilizando somente new Date():

const hj = new Date();

new Date( `${hj.getFullYear()}/${("0"+(hj.getMonth())).slice(-2)}/${("0"+(hj.getDate())).slice(-2)} ${("0"+(hj.getHours())).slice(-2)}:${("0"+(hj.getMinutes())).slice(-2)}:${("0"+(hj.getSeconds())).slice(-2)} -00:00`))
0

Você não precisa se preocupar muito com isso, já que o padrão que está sendo enviado para o back-end é da ISO 8601. Se você pegar seu date e der um console.log(date.toISOString()) tu vai ver que o retorno é exatamente esse que está indo pro back-end.
Já quando você receber esse valor novamente, basta dar um new Date(date) que voltará para o horário de brasília, logo, o horário correto para o usuário visualizar.

Alguns links que podem ajudar:

-5

solucion in Java.

public class LocalDateTimeDeserializer extends StdDeserializer<LocalDateTime> {

    private static final long serialVersionUID = 1L;

    protected LocalDateTimeDeserializer() {
        super(LocalDateTime.class);
    }

    /**
     * Caso venha informação de fuso horário (ISO-8601), trata o valor como ZonedDateTime e retorna o resultado da
     * sua conversão para LocalDateTime. Caso contrário, trata o valor diretamente como LocalDateTime.
     */
    @Override
    public LocalDateTime deserialize(JsonParser jp, DeserializationContext ctxt) throws IOException {
        String valor = jp.readValueAs(String.class);
        if (valor.contains("Z")) {
            ZonedDateTime zonedDateTime = ZonedDateTime.parse(valor);
            ZoneId fusoLocal = ZoneId.systemDefault();
            return zonedDateTime.withZoneSameInstant(fusoLocal).toLocalDateTime();
        } else {
            return LocalDateTime.parse(jp.readValueAs(String.class), "yyyy-MM-dd HH:mm:ss");
        }
    }

}
2
  • 1
    Essa é uma pergunta específica sobre Javascript e Angular. Sua resposta é sobre Java o que foge ao escopo do problema aqui levantado. Leia Como perguntar e visite nossa central de ajuda. Commented 30/11/2023 às 1:46
  • 1
    Mesmo que fosse em Java, esse código nem compila, pois o método LocalDateTime.parse recebe uma String e um DateTimeFormatter (não há nenhuma sobrecarga que aceite duas strings). Ou seja, deveria ser LocalDateTime.parse(valor, DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")). Mas ainda sim, na pergunta deixa bem claro que sempre terá o Z, não tem porque testar se ele está lá, poderia tentar o parsing e capturar a exceção se for o caso. Por fim, se já sabe que tem "Z", poderia fazer apenas return LocalDateTime.ofInstant(Instant.parse(valor), ZoneId.systemDefault())
    – hkotsubo
    Commented 30/11/2023 às 12:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .