Validación de fechas definitiva en Javascript?
<!DOCTYPE html>
<html lang="es">
<head>
<title>validación fechas</title>
<meta charset="utf-8">
<script type="text/javascript">
function numeroEnRango(num, inicio, fin) {
/*
devuelve true si num esta entre inicio y fin inclusives
false en caso contrario o no es numero
*/
if (isNaN(num)) return false;
if (!(parseInt(num) >= inicio && parseInt(num) <= fin)) return false;
return true;
}
function helperString(car, n) {
/*
devuelve un string que contiene n veces el car
*/
var resultado = "";
for (var i = 0; i < n; i++)
resultado += car;
return resultado;
}
function helperZeroLeft(num, digitos) {
/*
devuelve num con ceros a la izquierda hasta llegar al numero de digitos
*/
return helperString("0", digitos - num.toString().length) + num;
}
function helperFechaDDMMAAAA(ano, mes, dia) {
/*
devuelve una fecha en formato ES
*/
mes++; // teniendo en cuenta que en JS trabajamos de 0..11
return helperZeroLeft(dia, 2) + "/" + helperZeroLeft(mes, 2) + "/" + helperZeroLeft(ano, 4);
}
function validaFecha(ano, mes, dia) {
/*
Validacion basada en el objeto Date Tema 3
convierte a fecha un supuesto año/mes/dia, y compara extrayendo los mismos del objeto generado
http://aulavirtual2.juandegaray.es/pluginfile.php/8327/mod_resource/content/1/311_el_objeto_date.html
http://www.w3schools.com/jsref/jsref_getfullyear.asp
http://www.w3schools.com/jsref/jsref_getmonth.asp
http://www.w3schools.com/jsref/jsref_getdate.asp
*/
if (!numeroEnRango(dia, 1, 31)) return false;
if (!numeroEnRango(mes, 0, 11)) return false;
fecha = new Date(ano, mes, dia); //intenta crear fecha con los datos proporcionados
var cAno = fecha.getFullYear(); //extrae el año
var cMes = fecha.getMonth(); //extrae el mes
var cDia = fecha.getDate(); //extrae el dia, no confundir con getDay() => 0..6 dia semana
// ¿coinciden con los supuestos dia,mes,año con los extraidos tras la conversión?
if (cAno != ano || cMes != mes || cDia != dia) {
return false;
}
return true;
}
function validacion() {
var ano = parseInt(document.getElementById("ano").value);
var mes = parseInt(document.getElementById("mes").options[document.getElementById("mes").selectedIndex].value); //si vuestro enero == 1 => mes--;
var dia = parseInt(document.getElementById("dia").value);
if (validaFecha(ano, mes, dia) == false) {
document.getElementById("errorFecha").innerHTML = "la fecha (dd/mm/aaaa) " + helperFechaDDMMAAAA(ano, mes, dia) + " es incorrecta";
return false;
} else {
document.getElementById("errorFecha").innerHTML = "la fecha (dd/mm/aaaa) " + helperFechaDDMMAAAA(ano, mes, dia) + " parece correcta!";
return true;
}
}
function limpiarErrores(clase) {
/*
recorre los elementos con CSS class clase y limpia su contenido
*/
var errores = document.getElementsByClassName(clase);
for (var i = 0; i < errores.length; i++)
errores[i].innerHTML = "";
}
</script>
</head>
<body>
<form action="#">
<fieldset>
<legend>validación fechas</legend>
<label for="dia">Fecha</label>
<br>
<input type="text" name="dia" maxlength="2" id="dia" size="2" value="31">
<label for="mes">de</label>
<select id="mes" name="mes">
<option value="0">Enero</option>
<option value="1" selected>Febrero</option>
<option value="2">Marzo</option>
<option value="3">Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</select>
<label for="ano">de</label>
<input type="text" name="ano" maxlength="4" id="ano" size="4" value="2015">
<span id="errorFecha" class="error"></span>
<br>
</fieldset>
<input type="button" value="valida" onclick="limpiarErrores('error');validacion();">
<input type="reset" value="empezar" onclick="limpiarErrores('error');">
</form>
</body>
</html>
Podéis ver el ejemplo en acción aquí, y decidme si funciona en los comentarios:
Ejemplo on-line
Espero os sea útil y hasta la próxima.
