2

Estava fazendo uma interação com um componente de calendário feito com JavaScript puro, passando um array de datas para o componente para o mesmo selecionar as datas correspondentes no calendário.

Notei que quando eu mandava ranges de datas de um mês completo, as datas eram adicionadas efetivamente, menos em Outubro, Novembro e Dezembro.

A princípio pensei que era bug do plugin, posteriormente verifiquei que o problema estava na verdade no parse do objeto Date utilizando hífen e somente em meses+dias com 2 dígitos...

O bug subtrai uma 1 dia na data final, e seta um horário na data.

O valor fica correto com meses com 1 dígito: cro

O valor fica incorreto com meses com 2 dígitos: inserir a descrição da imagem aqui inserir a descrição da imagem aqui inserir a descrição da imagem aqui

O valor fica correto se não usar hífen: inserir a descrição da imagem aqui

Alguém sabe o motivo disso?

2 Respostas 2

8

De acordo com a especificação, o formato em questão ("ano-mês-dia", formato definido pela norma ISO 8601) deve ter o mês e dia sempre com 2 dígitos.

Qualquer coisa diferente disso terá um comportamento indefinido, e dependente do browser/ambiente no qual o código roda. Por exemplo, testando no Firefox (versão 68.0.2 Windows 64 bits), tanto new Date('2019-9-10') quanto new Date('2019-09-10') deram o mesmo resultado. Mas no Chrome (versão 76.0.3809.132 Windows 64 bits) e no Node (versão 14), os resultados foram diferentes, da forma que você relatou.

No meu entendimento, este comportamento está de acordo com este trecho da especificação:

If the String does not conform to that format the function may fall back to any implementation-specific heuristics or implementation-specific date formats.

Em tradução livre:

Se a string não estiver de acordo com este formato, pode ser usada qualquer heurística ou formato específico da implementação.

Ou seja, como 2019-9-10 não se encaixa no formato especificado, cada browser trata da forma que achar melhor.


Dito isso, na documentação de Date há o seguinte aviso:

date-only strings (e.g. "1970-01-01") are treated as UTC

Em tradução livre:

strings contendo somente a data (por exemplo, "1970-01-01") são tratadas como UTC.

Além disso, a documentação também diz que os campos de horário, quando omitidos, são setados para zero.

Isso quer dizer que new Date('2019-09-10') (repare que o mês está escrito com dois dígitos) cria uma data correspondente a 10 de setembro de 2019 à meia-noite (00:00:00.000) em UTC.

Mas quando você imprime uma data (seja com console.log, ou quando o próprio console do browser mostra o valor criado), ela é convertida para o fuso-horário do browser (que por sua vez, geralmente usa o que está configurado no sistema operacional).

No seu caso, pelos resultados, o fuso horário é o Horário Oficial de Brasília.

E como 10 de setembro de 2019 à meia-noite em UTC é igual à 9 de setembro de 2019, às 21h no Horário de Brasília, você vê essa "diferença". De maneira geral, os fusos horários do Brasil sempre estão algumas horas atrás do UTC (o Horário de Brasília está 3 horas atrás - ou duas, quando é horário de verão), então qualquer data criada à meia-noite em UTC corresponderá ao dia anterior no Horário de Brasília.


Quando o mês está com apenas um dígito, o Chrome considera que é meia-noite no fuso horário do browser (no caso, meia-noite no Horário de Brasília), e não em UTC (como acontece quando o mês possui 2 dígitos). Como eu já disse, provavelmente é algum detalhe de implementação, que é diferente do Firefox (pois nesse browser, em ambos os casos, o resultado foi meia-noite em UTC).

Outro ponto que pode explicar essa diferença é que a padronização do formato só foi definida no ES5 (em 2009). Antes disso, cada browser implementava diferentes formatos (e com diferentes resultados), que podiam ou não funcionar em outros browsers, podendo ter ou não o mesmo comportamento. Muitos foram mantidos até hoje por motivos de retrocompatibilidade (como provavelmente é o caso de 2019/09/10), e por isso, não há garantia que vão funcionar da mesma maneira em todos os browsers.

De qualquer forma, se quer manter o mesmo comportamento independente do mês, você tem duas opções:

  1. se quer o horário à meia-noite em UTC (que pode não corresponder ao mesmo dia no fuso horário do browser), use sempre o mês com 2 dígitos na string (2019-09-10 em vez de 2019-9-10).

  2. se quer o horário à meia-noite no fuso horário do browser, pode usar o construtor que recebe os valores numéricos. Por exemplo, new Date(2019, 8, 10) cria uma data referente à 10 de setembro de 2019, à meia-noite, no timezone do browser (sim, você tem que subtrair 1 do mês, pois os meses são indexados em zero: janeiro é zero, fevereiro é 1, etc).

  • outra maneira de forçar a hora para meia-noite no fuso horário do browser é usar o mês e dia com 2 dígitos e incluir o horário: new Date('2019-09-10T00:00')
4
  • Entao, o problema é que não tive bug algum com datas com mês com 1 digitos (janeiro a setembro), só tive problema com os meses que tem 2, novembro a dezembro. Apesar que essa parte do fuso-horario poderia ter alguma relaçao, esse erro acontece somente em meses com 2 digitos, e datas com 2 digitos, 2019-12-9 não da erro, mas com 2019-12-10 acontece.
    – EJSpawn
    Commented 8/09/2019 às 0:17
  • 1
    @EJSpawn É o que eu disse, se usar mês ou dia com 1 dígito, o formato não é mais o aceito na especificação e cada browser vai tratar de um jeito (no Chrome dá diferença, no Firefox não). Eu não considero bug porque a especificação diz que isso pode acontecer (qualquer formato que não tenha o mês e dia com 2 dígitos será dependente da implementação). De qualquer forma, eu sugiro sempre colocar com 2 dígitos, e se quiser pode forçar o horário para meia-noite, pois aí ele passa a considerar o horário local. Ex: new Date('2019-12-09T00:00') (adicione "T00:00" para forçar a hora pra meia-noite)
    – hkotsubo
    Commented 8/09/2019 às 20:18
  • No meu caso eu não pude setar a hora para meia noite, mas validei que efetivamente ele resolveria o problema. Outra solução que serviu melhor pro meu caso era, criar uma function que retornasse a data sem fuso horário: data.valueOf() - data.getTimezoneOffset() * 60000
    – EJSpawn
    Commented 19/09/2019 às 14:33
  • 1
    @EJSpawn Na verdade, ao subtrair do valueOf vc está criando uma data no passado (que por coincidência pode mostrar um valor de data e hora "correto"). Eu explico isso em detalhes nessa resposta (está na seção "E se eu usar outro timestamp?", mas é interessante ler tudo para entender melhor o que de fato acontece ao subtrair do valueOf) :-) Inclusive, no início da resposta eu explico porque um Date do JavaScript na verdade não tem fuso horário...
    – hkotsubo
    Commented 19/09/2019 às 14:41
-2

eu montei uma função que resolveu esse meu problema em converter data ISO em UTC, dando a sensação de '1 dia a menos' no resultado.

Uma função bem simples:

function formatDateISOToUTC(dateISO){
if (dateISO == null || dateISO == undefined || dateISO == ""){
    return null;
}
var dataArray = dateISO.split('-');
dataArray[2] + "/" + dataArray[1] + "/" + dataArray[0];

return new Date(dataArray);

}

No meu caso, apliquei em um processo que compara 2 datas UTC para checar a SLA e vigência de um atendimento.

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 .