Validación de fechas definitiva en Javascript?

Impactos: 8301


<!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>


Validación fechas en Javascript

Validación fechas en Javascript


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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.