How to check dates in Javascript?

Navigation
1

I have a form with two date inputs. One of them receives the beginning of the event, and the other the end of the event. With this in mind, I'm trying to create a Javascript function that makes it impossible for the end date to be before the start date. How can I do this?

I've already looked at some answers in Stack OverFlow in English, but they have not solved the problem. My form is this: 

<form name="form" action="novoevento" method="post" onsubmit="return autenticarDados()" class="form-inline">
  <div class="form-group">
    <label for="name">Nome do Evento:</label>
    <input required="required" type="text" class="form-control" name="nome">
  </div>
  <div class="form-group">
    <label for="dataInicio">Data de começo do evento:</label>
    <input required="required" type="date" min="2017-12-01" max="2017-12-31" class="form-control" name="dataIni">
  </div>
  <div class="form-group">
    <label for="dataFim">Data de fim do evento:</label>
    <input required="required" type="date" min="2017-12-01" max="2017-12-31" class="form-control" name="dataFim">
  </div>
  <button type="submit" name="Registrar" class="btn btn-default">Submit</button>
</form>
    
asked by anonymous 01.12.2017 / 21:22

2 answers

2

A good way to do this check is by creating new date objects with the values of the Start date and End date fields, the key used for this is new Date() . After doing this the verification is very simple, just check if one is inferior to another.

In this code you are running the function when you change the end date only so you can see the operation here. 

function autenticarDados(){
  const dataini = document.getElementById('dataini');
  const datafim = document.getElementById('datafim');
  
  const inicio = new Date(dataini.value).toISOString();
  const fim = new Date(datafim.value).toISOString();
  
  if (fim < inicio){
    console.log('Data final anterior à data inicial');
    return false
   }
  else {
    console.log('Data válida');
    return true   
  }
  
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form name="form" action="novoevento" method="post" onsubmit="return autenticarDados()" class="form-inline">
  <div class="form-group">
    <label for="name">Nome do Evento:</label>
    <input required="required" type="text" class="form-control" name="nome">
  </div>
  <div class="form-group">
    <label for="dataInicio">Data de começo do evento:</label>
    <input id="dataini" required="required" type="date" min="2017-12-01" max="2017-12-31" class="form-control" name="dataIni">
  </div>
  <div class="form-group">
    <label for="dataFim">Data de fim do evento:</label>
    <input id="datafim" onchange="autenticarDados()" required="required" type="date" min="2017-12-01" max="2017-12-31" class="form-control" name="dataFim">
  </div>
  <button type="submit" name="Registrar" class="btn btn-default">Submit</button>
</form>
    
01.12.2017 / 22:06
-1

Your function should look something like this ... 

    function autenticarDados(){

       var dataI = new Date(document.getElementsByName("dataIni").val()).toDateString();
       var dataF = new Date(document.getElementsByName("dataFim").val()).toDateString();

       if(dataF < dataI){
          console.log('data final menor que data inicio');
          return false;
       }

       return true; 

    }
    
01.12.2017 / 21:56
PHP, marking checkbox for printing String for Array / List