How to check dates in Javascript?

Asked

Viewed 81 times

1

I have a form with two date inputs. One receives the start of the event, and the other the end of the event. With that 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 that?

I’ve already looked at some answers in Stack Overflow in English, but they haven’t 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>
javascript

2 answers

2


A good way to do this is to create new date objects with the values of the Start Date and End Date fields, the key used for this is new Date(). Once done the check is quite simple, just check if one is inferior to another.

In this code you are executing the function when you change the final date only so that you see here the function.

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>

  • @When I take the test, it gives a valid date! , an event can start and end on the same day, unless in its logic it has to be at least 1 day, so the verification could be valid only if fim > inicio.

  • All right, I misread rs.. was wrong. + 1

  • Tranquilo, Valeu @Dvd!

-1

Your job 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; 

    }

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.