É 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>
datetime-local
possuem um atributo chamadomin
. Você pode fazer binding desse atributo emdate-end
com o valor dedate-beginning
. Você está usando alguma biblioteca para JavaScript? Angular ou algo do gênero?