1

Tenho um formulário com dois inputs de data. Um deles recebe o início do evento, e o outro o fim do evento. Tendo isso em vista, estou tentando criar uma função em Javascript que impossibilite que a data de fim seja antes da data de início. Como posso fazer isso?

Já olhei algumas respostas no Stack OverFlow em inglês, mas elas não solucionaram o problema. O meu formulário é esse:

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

2 Respostas 2

2

Uma boa maneira de fazer essa verificação é criando novos objetos de datas com os valores dos campos Data inicial e Data final, a chave utilizada para isso é new Date(). Após feito isso a verificação é bem simples, basta verificar se uma é inferior a outra.

Nesse código está executando a função quando altera a data final somente para que visualize aqui o funcionamento.

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>

3
  • @ÐvÐ, quando eu faço o teste ele dá Data válida!, um evento pode iniciar e finalizar no mesmo dia, a não ser que na lógica dele tenha que ter no mínimo 1 dia, sendo assim a verificação poderia ser válida apenas se fim > inicio. Commented 2/12/2017 às 10:05
  • Tá certo, eu que li errado rs.. foi mal. +1
    – Sam
    Commented 2/12/2017 às 15:43
  • Tranquilo, Valeu @DvD! Commented 2/12/2017 às 15:49
-1

Tua função deve ficar mais ou menos assim...

    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; 

    }

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 .