En este artículo vamos a crear una máscara inteligente para un campo <input> donde se tiene que introducir una fecha. A la hora de escribir la fecha el usuario el propio campo colocará caracteres para separar los bloques de la fecha y además realizará algunas pequeñas validaciones sobre los datos de la fecha, para que se escriban fechas en los intervalos que consideremos lógicos.

El ejercicio consiste en una funcion que realicé para hacer mas fácil la escritura de campos fecha con formatos de dd/mm/aaaa y una pequeña validacion. En el ejercicio también hago uso de una pequeña funcion para saber si un valor es numerico:

Campo INPUT para introducir la fecha

Debemos terner un formulario HTML con un campo INPUT con la siguiente forma:

<input name="fecha" type="text" size="10" maxlength="10" onKeyUp="this.value=formateafecha(this.value);">

En el anterior elemento se puede observar que hacemos un llamado a la funcion: formateafecha.

Javascript para trabajar con el formateo de la fecha

En el mismo documento HTML colocamos los javascript con las funciones o lo ponemos aparte en un archivo.js hacien donde deberiamos hacerle un llamado.

El código completo de nuestro Javascript es el siguiente:

function IsNumeric(valor) {
    var log = valor.length;
    var sw = "S";
    for (x = 0; x < log; x++) {
        v1 = valor.substr(x, 1);
        v2 = parseInt(v1);
        //Compruebo si es un valor numérico
        if (isNaN(v2)) {
            sw = "N";
        }
    }
    if (sw == "S") {
        return true;
    } else {
        return false;
    }
}

var primerslap = false;
var segundoslap = false;

function formateafecha(fecha) {
    var long = fecha.length;
    var dia;
    var mes;
    var ano;

    if ((long >= 2) && (primerslap == false)) {
        dia = fecha.substr(0, 2);
        if ((IsNumeric(dia) == true) && (dia <= 31) && (dia != "00")) {
            fecha = fecha.substr(0, 2) + "/" + fecha.substr(3, 7);
            primerslap = true;
        } else {
            fecha = "";
            primerslap = false;
        }
    } else {
        dia = fecha.substr(0, 1);
        if (IsNumeric(dia) == false) {
            fecha = "";
        }
        if ((long <= 2) && (primerslap = true)) {
            fecha = fecha.substr(0, 1);
            primerslap = false;
        }
    }
    if ((long >= 5) && (segundoslap == false)) {
        mes = fecha.substr(3, 2);
        if ((IsNumeric(mes) == true) && (mes <= 12) && (mes != "00")) {
            fecha = fecha.substr(0, 5) + "/" + fecha.substr(6, 4);
            segundoslap = true;
        } else {
            fecha = fecha.substr(0, 3);;
            segundoslap = false;
        }
    } else {
        if ((long <= 5) && (segundoslap = true)) {
            fecha = fecha.substr(0, 4);
            segundoslap = false;
        }
    }
    if (long >= 7) {
        ano = fecha.substr(6, 4);
        if (IsNumeric(ano) == false) {
            fecha = fecha.substr(0, 6);
        } else {
            if (long == 10) {
                if ((ano == 0) || (ano < 1900) || (ano > 2100)) {
                    fecha = fecha.substr(0, 6);
                }
            }
        }
    }

    if (long >= 10) {
        fecha = fecha.substr(0, 10);
        dia = fecha.substr(0, 2);
        mes = fecha.substr(3, 2);
        ano = fecha.substr(6, 4);
        // Año no viciesto y es febrero y el dia es mayor a 28
        if ((ano % 4 != 0) && (mes == 02) && (dia > 28)) {
            fecha = fecha.substr(0, 2) + "/";
        }
    }
    return (fecha);
}

Con esto hemos hecho un campo de formulario inteligente para recuperar fechas del usuario. Espero que puedas entender fácilmente el código a partir de sus comentarios y que luego lo puedas adaptar a tus necesidades, o inspirarte en el ejercicio para hacer tu propia máscara de fechas con Javascript.