jueves, 19 de diciembre de 2013

Funciones sobre fechas en Javascript / jQuery

Hace unos días estuve renegando un poco en el trabajo teniendo que validar algunas fechas, y calcular un intervalo de tiempo para una fecha dada, desde el lado cliente.
Para esto decidí utilizar Javascript y un poco de jQuery.

Por este motivo decidí realizar mi primer post con funciones que creé, y que me facilitaron dicha manipulación de fechas.

Como primera función, tenemos la que calcula si un año es bisiesto o no:
// Función que valida si un año es bisiesto o no.
// Parámetros: anio = el año a validar.
// Retorno: true o false.
function esBisiesto(anio) {
    return ((anio % 4 == 0 && anio % 100 != 0) || anio % 400 == 0) ? true : false;
};
Esta función es bastante simple, y la encontré en algún lugar en la web.

Luego, creé una función para validar una fecha ingresada, en el formato que se utiliza en Argentina (dd/mm/yyyy):
// Función que valida si una fecha es válida en formato dd/mm/yyyy.
// Parámetros: fecha a validar en formato dd/mm/yyyy.
// Retorno: true o false.
function validaFecha(fecha) {
    var arreglo = fecha.split("/");

    if (arreglo.length != 3)
        return false;

    if (!parseInt(arreglo[0]) || !parseInt(arreglo[1]) || !parseInt(arreglo[2]))
        return false;

    var dia = parseInt(arreglo[0]);
    var mes = parseInt(arreglo[1]);
    var anio = parseInt(arreglo[2]);

    if (dia < 1 || dia > 31 || mes < 1 || mes > 12 || anio < 1)
        return false;

    switch (mes) {
        case 4:
        case 6:
        case 9:
        case 11:
            if (dia > 30)
                return false;
            break;
        case 2:
            if (esBisiesto(anio)) {
                if (dia > 29)
                    return false;
            }
            else {
                if (dia > 28)
                    return false;
            }
    }
    return true;
};
Para esta función, termino utilizando la primera del post (esBisiesto()).

Lo siguiente, es una función para validar el intervalo en días a sumar o restar a mi fecha previamente validada. Este intervalo debe respetar un formato definido por un signo (+ o -) dependiendo de la operación a realizar, y seguido inmediatamente el número de días a sumar o restar (p.e. +10 o -35).
// Función que valida si un intervalo a sumar o restar a una fecha es válido, en formato +d o -d.
// Parámetros: intervalo = intervalo a validar en formato +d o -d (d = cantidad de días).
// Retorno: true o false.
function validaIntervalo(intervalo) {
    var primero = intervalo.substring(0, 1);
    var valor = intervalo.substring(1, intervalo.length);

    if (primero != "+" && primero != "-")
        return false;

    if (!parseInt(valor))
        return false;

    return true;
}

La última función es la que calcula la nueva fecha, a partir de la fecha inicial y el intervalo indicado.
// Función que calcula una nueva fecha a partir de una inicial, y un intervalo.
// Parámetros: fecha = fecha inicial en formato dd/mm/yyyy.
//             intervalo = intervalo a sumar o restar a la fecha inicial, en formato +d o -d (d = cantidad de días).
// Retorno: true o false.
function nuevaFecha(fecha, intervalo) {
    var arrayFecha = fecha.split('/');
    var interv = intervalo.substring(1, intervalo.length);
    var operacion = intervalo.substring(0, 1);
    var dia = arrayFecha[0];
    var mes = arrayFecha[1];
    var anio = arrayFecha[2];
    var fechaInicial = new Date(anio, mes - 1, dia);
    var fechaFinal = fechaInicial;
    
    if (operacion == "+")
        fechaFinal.setDate(fechaInicial.getDate() + parseInt(intervalo));
    else 
        fechaFinal.setDate(fechaInicial.getDate() - parseInt(intervalo));
    
    dia = fechaFinal.getDate();
    mes = fechaFinal.getMonth() + 1;
    anio = fechaFinal.getFullYear();

    dia = (dia.toString().length == 1) ? "0" + dia.toString() : dia;
    mes = (mes.toString().length == 1) ? "0" + mes.toString() : mes;

    return dia + "/" + mes + "/" + anio;
};
Esta función retorna un string con la nueva fecha, luego de aplicarle la suma o resta del intervalo indicado, en formato "dd/mm/yyyy".

Por último dejo un ejemplo de un archivo HTML, donde pueden probarse las funciones mostradas anteriormente.
<html>
    <head>
        <title>Fechas en Javascript / jQuery</title>
        <style>
            div {
                padding: 5px;}
        </style>
        <script src="./Scripts/jquery-1.10.2.js"></script>
        <script src="./Scripts/fechas.js"></script>
    </head>
    <body>
        <div>
            <label>Fecha inicial: </label>
            <input id="txtFechaInicial" style="width: 100px;" type="text" />
        </div>
        <div>
            <label>Intervalo: </label>
            <input id="txtIntervalo" style="width: 50px;" type="text" />
        </div>
        <div>
            <button id="btnCalcular">Clacular</button>
        </div>
        <div>
            <label id="lblFechaFinal">Fecha final: </label>
        </div>
        <script>
            $(document).ready(function() {
                
                $("#btnCalcular").click(function () {
                    var fecha = $("#txtFechaInicial").val();
                    var intervalo = $("#txtIntervalo").val();

                    if (validaFecha(fecha)) {
                        if (validaIntervalo(intervalo)) {
                            var newFecha = nuevaFecha(fecha, intervalo);
                        }
                        else {
                            alert("Error en el formato del intervalo!");
                        }
                    }
                    else {
                        alert("Error en el formato de la fecha!");
                    }

                    $("#lblFechaFinal").html("Fecha final: " + newFecha);
                });

            });
        </script>
    </body>
</html>

Un saludo,
Juan Daniel.

1 comentario:

Anónimo dijo...

Que groso!!