1

Quiero comparar dos fechas, una fecha inicial y una fecha final. La fecha inicial debe ser menor a la fecha final. No deseo un evento alert, quiero mostrar el mensaje en el campo fecha final cuando esa fecha sea menor, similar los mensajes requiere="" de html5. Este es mi código:

function validate() {
inicio=document.getElementById('fechaInicial').value;
fin=document.getElementById('fechaFinal').value;
if(fin<inicial) 
document.getElementById('fechaFinal').setCustomValidity('Esta fecha ser mayor a fecha incial.');
}
<form class="form-horizontal"  method="post" action="" name="form"'>
Desde:<input name="fechaInicial" type="date" placeholder="" required="" max="<?php echo date("Y-m-d");?>">
Hasta:<input name="fechaFinal" type="date" title="La fecha inicial debe ser menor que la fecha final" required="" max="<?php echo date("Y-m-d");?>" oninput="validate()">
</form>

2 respuestas 2

2

Tienes bastantes problemas con las comillas. Además, no les has indicado los ID's a ninguno de tus inputs.

Por otro lado, tendrías que comparar con respecto a inicio y no a la variable inicial, la cual no está definida.

Y por último, para que el atributo title se cambie cuando la condición sea incorrecta, debes reescribir su valor accediendo directamente al valor de title:

function validate() {
inicio=document.getElementById('fechaInicial').value;
fin=document.getElementById('fechaFinal').value;
if(fin<inicio) 
document.getElementById('fechaFinal').title ='Esta fecha ser mayor a fecha incial.';
}
<form class="form-horizontal"  method="post" action="" name="form">
Desde:<input id="fechaInicial" name="fechaInicial" type="date" placeholder="" required="" max="<?php echo date('Y-m-d');?>">
Hasta:<input id="fechaFinal" name="fechaFinal" type="date" title="La fecha inicial debe ser menor que la fecha final" required="" max="<?php echo date('Y-m-d');?>" oninput="validate()">
</form>

11
  • Disculpa, tienes razón se me fue comilla doble junto con una comilla sencilla, además no le coloque el id a los inputs, respecto al alert quiero que se muestre como en html5 cambiando el setCustomValidity() Commented el 13 nov. 2016 a las 15:33
  • 1
    @JairoCarballo a que te refieres con:** quiero que se muestre como en html5 cambiando el setCustomValidity()**
    – hubman
    Commented el 13 nov. 2016 a las 15:39
  • @rn3w Justo iba a preguntar yo lo mismo. Commented el 13 nov. 2016 a las 15:40
  • Quiero que cuando la fecha final sea menor no me muestre un alert sino me muestre el title"" Commented el 13 nov. 2016 a las 15:50
  • Algo así: Desde<input id="fechaInicial" name="fechaInicial" type="date" required="" max="<?php echo date("Y-m-d");?>"> Hasta:<input id="fechaFinal" name="fechaFinal" type="date" title="La fecha final debe ser mayor" required="" max="<?php echo date("Y-m-d");?>" oninput="if(this.checkValidity()) form.fechaInicial.value > this.value ? this.title : '');"> Commented el 13 nov. 2016 a las 15:50
0

Listo, esto era lo que quería:

<script>
function validate() {
	if(document.getElementById('fechaFinal').value<document.getElementById('fechaInicial').value) 
		document.getElementById('fechaFinal').setCustomValidity('Esta fecha debe ser mayor a la fecha inicial');
	else 
		document.getElementById('fechaFinal').setCustomValidity('');
}
</script>
<form class="form-horizontal"  method="post" action="" name="form">
Desde:<input id="fechaInicial" name="fechaInicial" type="date" placeholder="" required="" max="<?php echo date('Y-m-d');?>">
Hasta:<input id="fechaFinal" name="fechaFinal" type="date" title="La fecha inicial debe ser menor que la fecha final" required="" max="<?php echo date('Y-m-d');?>" oninput="validate()">
<button>Enviar</button>	
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.