0

Tenho dois campos do tipo date no meu formulário, o campo data_inicio e data_fim.

Estou precisando montar um script que quando eu terminar de preencher as datas, ou seja quando os campos perderem o foco, for emitido um alerta avisando se data_inicio é maior do que a data_fim, sendo que a data_inicio jamais pode ser maior do que a data_fim.

Já fiz um script usando o evento onclik, mas ele só avisa quando clico no submit.

Segue o código abaixo:

 function comparadatas()
 {
   var data_inicio = document.getElementById("data_inicio").value;
   var data_fim = document.getElementById("data_fim").value;
    
    if(data_inicio > data_fim){
        alert("ERRO! A DATA DE NOTICAÇÃO NAO PODE SER MAIOR DO QUE A DATA DE COMPARECIMENTO");   
    }
 }
<form>
  <label for="data_inicio">Data Inicio</label>
  <input type="date" name="data_inicio" id="data_inicio"><br/>

  <label for="data_fim">Data Final</label>
  <input type="date" name="data_fim" id="data_fim"><br/>

  <input type="submit" value="REALIZAR CADASTRO" onclick="comparadatas()">
</form>

0

2 Respostas 2

0

Basta utilizar o evento onblur. Esse evento será enviando quando um determinado elemento perder o foco.

Você pode passar o atributo onblur="comparadatas" nos elementos de data ou utilizar Js para definir. Eu utilizei js no exemplo abaixo por questão de gosto.

const data_inicio = document.getElementById("data_inicio");
const data_fim = document.getElementById("data_fim");

data_inicio.addEventListener("blur", () => {
  comparadatas();
});

data_fim.addEventListener("blur", () => {
  comparadatas();
});

function comparadatas() {
  if (data_inicio.value == "" || data_fim.value == "") return false;
  
  if (data_inicio.value > data_fim.value) {
    alert("ERRO! A DATA DE NOTICAÇÃO NAO PODE SER MAIOR DO QUE A DATA DE COMPARECIMENTO");
  }
}
<form>
  <label for="data_inicio">Data Inicio</label>
  <input type="date" name="data_inicio" id="data_inicio"><br/>

  <label for="data_fim">Data Final</label>
  <input type="date" name="data_fim" id="data_fim"><br/>

  <input type="submit" value="REALIZAR CADASTRO" onclick="comparadatas()">
</form>

0
<script>
function comparadatas() {
  const data_inicio = document.getElementById("data_inicio");
  const data_fim = document.getElementById("data_fim");
  if (data_inicio.value == "" || data_fim.value == "") return false;

  if (data_inicio.value > data_fim.value) {
    alert("A DATA DE NOTICAÇÃO NAO PODE SER MAIOR DO QUE A DATA DE COMPARECIMENTO!");
  }
}
</script>

<form>
  <label for="data_inicio">Data Inicio</label>
  <input type="date" name="data_inicio" id="data_inicio"><br/>

  <label for="data_fim">Data Final</label>
  <input type="date" name="data_fim" id="data_fim" onblur="comparadatas()"><br/>

</form>
2
  • Bom dia pessoal, muito obrigado pela ajuda, consegui resolver
    – odmarques
    Commented 12/02/2018 às 15:18
  • Faltou marcar a outra como correta. '-' Commented 12/02/2018 às 21:01

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