4

Tenho um formulário em HTML no qual dou a possibilidade ao utilizador de inserir uma data inicio e uma data fim e, como é óbvio, não quero que a data fim seja anterior à data inicio.

Os inputs para as datas são do tipo "datetime-local". O meu objetivo seria, após a inserção da Data Inicio, os campos com os dias anteriores ao dia inserido na Data Inicio aparecessem como "bloqueados" ou assim.

Código:

<div class="form-group">
  <label for="date-form1">Data/Hora Inicio</label>
  <input class="form-control" type="datetime-local" name="date-beginning" id="date-form1">
</div>

<!-- Data Fim -->
<div class="form-group">
  <label for="date-form2">Data/Hora Fim</label>
  <input class="form-control" type="datetime-local" name="date-end" id="date-form2">
</div>

3
  • Você usa alguma biblioteca JS para manipular datas? Tipo momentjs e afins.
    – Jéf Bueno
    Commented 22/03/2017 às 17:48
  • Não, não estou a usar nenhuma biblioteca @jbueno
    – Vítor Sá
    Commented 22/03/2017 às 17:51
  • 1
    Oi Vitor, inputs do tipo datetime-local possuem um atributo chamado min. Você pode fazer binding desse atributo em date-end com o valor de date-beginning. Você está usando alguma biblioteca para JavaScript? Angular ou algo do gênero? Commented 22/03/2017 às 17:56

1 Resposta 1

7

É só criar um objeto do tipo Date e comparar normalmente se a primeira data é maior do que a segunda.

Uma dica é verificar se a data final é válida ao tentar sair do segundo input e, caso ela não seja, mostrar alguma mensagem e voltar o foco para o segundo input.

Perceba que a ideia de voltar o foco para input caso a entrada seja inválida parece interessante num primeiro momento, mas vai bloquear o usuário de tentar modificar a primeira data sem antes entrar com um intervalo válido. Ou seja, caso a primeira tenha sido digitada errada, o usuário vai precisar colocar uma data final válida para depois poder editar a data inicial.

Também é possível setar o atributo min do segundo input igual (ou maior) a data do primeiro assim que for clicado fora do primeiro input. Não vou fazer este exemplo em código porque não sei se caberia na pergunta do jeito que está e nem sei se isto te interessa.

$('#date-form2').on('focusout', function(){  
  var dateObj1 = new Date($('#date-form1').val());
  var dateObj2 = new Date($('#date-form2').val());
  
  if(dateObj1.getTime() > dateObj2.getTime()){
    $(this).css({color: 'red'});
    // mostre alguma mensagem
    $(this).focus(); // Volta o foco para o segundo input
  }  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="date-form1">Data/Hora Inicio</label>
  <input class="form-control" type="datetime-local" name="date-beginning" id="date-form1">
</div>

<!-- Data Fim -->
<div class="form-group">
  <label for="date-form2">Data/Hora Fim</label>
  <input class="form-control" type="datetime-local" name="date-end" id="date-form2">
</div>

2
  • Obrigado pela ajuda @jbueno! Mas porque vocês meteu aquela linha com a tag "<script>" antes do código html? E esse método onde compara as datas não tem de ser chamado em algum lado no html?
    – Vítor Sá
    Commented 23/03/2017 às 9:40
  • @VítorSá Aquilo é só uma referência pro jQuery. Eu fiz com jQuery pra ficar mais fácil de ler.
    – Jéf Bueno
    Commented 23/03/2017 às 12:05

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 .