date comparison with javascript [duplicate]

Question

date comparison with javascript [duplicate]

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have two fields of type date in my form, the field data_inicio and data_fim .

I need to set a script that when I finish filling the dates, that is when the fields lose their focus, an alert is sent, warning if data_inicio is greater than data_fim , data_inicio can never be greater than data_fim .

I've already done a script using the onclik event, but it only warns me when I click on submit .

Follow the code below:

 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>

javascript

asked by anonymous 12.02.2018 / 04:56

2 answers

Help to build mysql query SubmitChanges () does not update data in Linq

score 0 · Answer 1

Just use the onblur event. This event will be sent when a particular element loses focus.

You can pass the onblur="comparadatas" attribute on the date elements or use Js to set. I used js in the example below for taste.

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>

score 0 · Answer 2

<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>