Seguramente todo nos habremos encontrado con este problema más de una vez y es el de comprobar que una fecha tiene el formato correcto antes de enviarse el formulario.
Para ello, os traigo un script que os lo haraá de forma totalmente fiable para todos los navegadores actuales y su implementación es sumamente sencilla.
El script hace que cuando perdemos el foco sobre el input sobre el que escribimos la fecha, compruebe su formato y si no es correcto añada un icono de advertencia a la derecha del input y además, ponga el input con un fondo amarillo para que destaque que se ha introducido mal.
Debemos tener en cuenta, también, que el formato que nosotros queremos es dd-mm-aaaa. Si quisieramos otro, tan solo deberíamos modificar la expresión regular de la función.
Nosotros hemos puesto una ruta de imagen representativa que cada uno luego debería poner la suya, en nuestro caso es un icono de alerta amarillo.
Por último, acordaros de tener en incluida la librería JQuery ya que ese código se vale de ella.
El código es el siguiente:
function esFechaValida(fecha){
if (fecha != undefined && fecha.value != "" ){
if (!/^\d{2}\-\d{2}\-\d{4}$/.test(fecha.value)){
if($(fecha).next().attr('class')=='advertencia-fecha'){}
else{
$(fecha).after('
');
$(fecha).css('background','#fff09e');
}
return false;
}
var dia = parseInt(fecha.value.substring(0,2),10);
var mes = parseInt(fecha.value.substring(3,5),10);
var anio = parseInt(fecha.value.substring(6),10);
switch(mes){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
numDias=31;
break;
case 4: case 6: case 9: case 11:
numDias=30;
break;
case 2:
if (comprobarSiBisisesto(anio)){ numDias=29 }else{ numDias=28};
break;
default:
if($(fecha).next().attr('class')=='advertencia-fecha'){}
else{
$(fecha).after('');
$(fecha).css('background','#fff09e');
}
return false;
}
if (dia>numDias || dia==0){
if($(fecha).next().attr('class')=='advertencia-fecha'){}
else{
$(fecha).after('');
$(fecha).css('background','#fff09e');
}
return false;
}
if($(fecha).next().attr('class')=='advertencia-fecha'){
$(fecha).next().remove();
$(fecha).css('background','url(/images/forms/input_shadow.png) no-repeat');
}
return true;
}
}
function comprobarSiBisisesto(anio){
if ( ( anio % 100 != 0) && ((anio % 4 == 0) || (anio % 400 == 0))) {
return true;
}
else {
return false;
}
};
Una vez hayamos incluido este código en nuestro archivo javascript correspondiente debemos de inicilizar la función, para ello:
$("#fecha").live('blur',function(){
var aux=this;
setTimeout(function(){esFechaValida(aux);}, 200);
});
Donde "fecha" es el ID del input en el que escribimos la fecha. Con ésto ya tendríais listo el validador de la fecha.
Espero que os sea útil.