1

Tenho dois inputs do tipo date. Um para que o usuário insira a data inicial e o outro para que seja inserida uma data final. Criei uma variável que recebe a data atual usando apenas o new Date.

Tenho uma função que verifica se a data atual é maior que a data final. Se sim, ela retorna uma mensagem. Se não, ela retorna uma mensagem diferente. Testei em dois navegadores, Firefox e Chrome. No Firefox esta função retorna corretamente as validações. O problema vem agora, no Chrome ele não entende as condições de if e else que criei.

JSFiddle

window.onload = function () {
    var d1 = document.getElementById('inicio').valueAsDate
    var d2 = document.getElementById('fim').valueAsDate
    var agora = new Date()

    console.log(agora)
    var btn = document.getElementById('btn')

    btn.addEventListener('click', function checkTime() {
        if(agora > d2) {
            console.log('Turma finalizada.')
        } else
            console.log('Turma em andamento.')
    })
}
<input type="date" id="inicio">
<input type="date" id="fim">
<input type="button" value="Clique" id="btn">

1 Resposta 1

1

O problema é que no evento de click as variáveis agora e d2 terão os valores que tinham inicialmente, antes do clique. Ou seja, o valor de d2 não é atualizado (basta colocar um console.log(d2) dentro da sua função checkTime para ver que ela sempre está com o valor null).

Enfim, bastaria colocar a parte que pega os valores dentro da função correta. Mas tem outro detalhe: um campo input type="date" só tem a data (dia, mês e ano), mas não tem o horário (horas, minutos, segundos). Só que new Date() cria uma data contendo também o horário atual.

Então a comparação leva em conta o horário. O problema é que a data retornada por valueAsDate acaba tendo o horário setado para meia-noite em UTC. Sendo assim, se quer que a comparação não leve em conta o horário (e somente o dia, mês e ano), você precisa setar o horário para meia-noite:

window.onload = function() {
    var btn = document.getElementById('btn');
    btn.addEventListener('click', function() {
        var d1 = document.getElementById('inicio').valueAsDate;
        var d2 = document.getElementById('fim').valueAsDate;
        var agora = new Date();
        // ajusta o horário para meia-noite em UTC
        agora.setUTCHours(0, 0, 0, 0);
        if(agora > d2) {
            console.log('Turma finalizada.');
        } else {
            console.log('Turma em andamento.');
        }
    });
};
<input type="date" id="inicio">
<input type="date" id="fim">
<input type="button" value="Clique" id="btn">

Obs: No código JavaScript, coloquei ponto-e-vírgula no final das linhas. Pode parecer "frescura", e sei que o JavaScript "aceita" o código sem ponto e vírgula e "funciona", mas isso evita algumas situações bizarras que podem ocorrer se você não usá-los, como essa e essa (veja mais sobre isso aqui).

1
  • 1
    Muito obrigada, de verdade. Me salvou por hoje. Está funcionando perfeitamente no Chrome também. Sou iniciante em Js e preciso estudar mais. Fico feliz por existir um stackoverflow :-)
    – M. Bran
    Commented 23/06/2021 às 18:23

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 .