2

Tenho uma página em HTML com um formulário de envio de data/hora de entrada e data/hora saída (input datetime-local).

Preciso verificar na mesma página se os campos foram preenchidos somente com as datas diferentes no momento em que o usuário clicar no botão submit.

function validar() {
var dataHoraInicio = formInsere.dataHoraInicio.value;
var dataHoraFim    = formInsere.dataHoraFim.value;

if (dataHoraInicio == "") {
alert('Preencha o campo data hora entrada!');
formInsere.dataHoraInicio.focus();
return false;
}

if (dataHoraFim == "") {
alert('Preencha o campo data hora saida!');
formInsere.dataHoraInicio.focus();
return false;
}

}//fim function//
<html>
<head>
</head>
<body>

<br>
<br>

<form id="formInsere" action="valida.php" name="formInsere" method="POST" >
             
			 <label>&nbsp;Data hor&aacute;rio entrada<br>
            <input type="datetime-local" name="dataHoraInicio">
        </label>
        <br><br>
                <label>&nbsp;Data hor&aacute;rio sa&iacute;da<br>
                    <input type="datetime-local" name="dataHoraFim">
                </label><br>
                <br><br>
				
		<input type="submit"  onclick="return validar()">		
</form>



</body>
</html> 

1 Resposta 1

2

A primeira coisa é entender que o valor de um campo datetime-local é uma string no formato ISO 8601. Exemplo:

function validar(evt) {
  let dataHoraInicio = document.querySelector('#formInsere').dataHoraInicio.value;
  console.log(dataHoraInicio);
  console.log(typeof dataHoraInicio); // string
  evt.preventDefault();
}

document.querySelector('#formInsere').addEventListener('submit', validar);
<form id="formInsere" name="formInsere" method="POST" >
  <input type="datetime-local" name="dataHoraInicio">
  <input type="submit">     
</form>

Colocando a data de "15 de março de 2019, às 10:30", a variável dataHoraInicio terá o valor igual a 2019-03-15T10:30. Qualquer data que você colocar terá o seu value nesse formato ("aaaa-mm-ddThh:mm").

Felizmente a classe Date do JavaScript reconhece esse formato, então basta você passar este valor para o construtor, e em seguida verificar se o dia, mês e ano são os mesmos.

Pelo que entendi, o formulário não deve ser submetido se a data (dia, mês e ano) for igual, independente dos horários escolhidos. Sendo assim, basta comparar o dia, mês e ano:

let formulario = document.querySelector('#formInsere');

function validar(evt) {
  let dataHoraInicio = formulario.dataHoraInicio.value;
  let dataHoraFim    = formulario.dataHoraFim.value;
  if (dataHoraInicio == "") {
    alert('Preencha o campo data hora entrada!');
    formulario.dataHoraInicio.focus();
    evt.preventDefault();
  } else if (dataHoraFim == "") {
    alert('Preencha o campo data hora saida!');
    formulario.dataHoraInicio.focus();
    evt.preventDefault();
  } else {
    // cria as datas
    let dtInicio = new Date(dataHoraInicio);
    let dtFim = new Date(dataHoraFim);
    // verifica se o dia, mês e ano são iguais
    if (dtInicio.getDate() === dtFim.getDate()
        && dtInicio.getMonth() === dtFim.getMonth()
        && dtInicio.getFullYear() === dtFim.getFullYear()) {
      alert('As datas não podem estar no mesmo dia');
      evt.preventDefault();
    }
  }
}

formulario.addEventListener('submit', validar);
<form id="formInsere" name="formInsere" method="POST">
    <label>&nbsp;Data hor&aacute;rio entrada</label>
    <input type="datetime-local" name="dataHoraInicio"><br>
    <label>&nbsp;Data hor&aacute;rio sa&iacute;da</label>
    <input type="datetime-local" name="dataHoraFim"><br>
    <input type="submit">
</form>

A comparação acima considera apenas o dia (getDate()), mês (getMonth()) e ano (getFullYear()). Atenção para não usar erroneamente os métodos getDay() (que retorna o dia da semana, e não o dia do mês) e getYear() (que além de estar deprecated, retorna o ano indexado em 1900 - ou seja, 2019 é retornado como 119).

Se quiser comparar tanto a data quanto a hora, basta trocar o if por:

if (dtInicio.getTime() === dtFim.getTime()) {
    // datas são iguais (tanto o dia/mês/ano quanto o horário)
}

getTime() retorna o valor do timestamp (o número de milissegundos desde o Unix Epoch), e é o modo mais direto de verificar se as datas correspondem exatamente ao mesmo instante.


Lembrando que alguns browsers não suportam o input type=datetime-local, mas a documentação descreve meios de contornar esta limitação.

6
  • Ok, estou ciente que alguns browsers não suportam!
    – PCP84
    6/03/2019 às 15:13
  • Muito obrigado pela ajuda!
    – PCP84
    6/03/2019 às 15:20
  • @PhelipeMachado Se a resposta resolveu o seu problema, vc pode optar por aceitá-la, veja aqui como e porque fazê-lo. Não é obrigatório, mas é uma boa prática do site, para indicar a futuros visitantes que aquilo resolveu o problema. E quando tiver 15 pontos vc também poderá votar em todas as respostas que achou úteis.
    – hkotsubo
    6/03/2019 às 15:55
  • Amigo, no caso para que as datas não sejam sejam diferentes, ex: data hora inicio 04-04-2019 07:00 data hora fim 04-04-2019 17:00 como ficaria a validação? Pois eu mudei o operador === para != e não funcionou! Poderia me ajudar, por favor!?
    – PCP84
    6/03/2019 às 15:58
  • Sugiro que edite a pergunta e coloque o código, pois assim fica mais fácil descobrir o problema
    – hkotsubo
    6/03/2019 às 15:59

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 .