Continuando con las validaciones de los campos de texto, hoy voy a explicar como se valida una fecha en un input utilizando nuestro amigo javascript. Realice un pequeño código que se encarga de validar el formato de la fecha introducido en un input y a su vez valida que esta fecha exista. El código tiene comentarios de ayuda, para que puedan enteder mejor cada linea de código.
Código Ejemplo:
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
<body>
<label for="TxtFecha">Fecha: </label>
<!-- En el evento onKeyPress llamamos la función SoloNumeros() y en el onKeyUp la función ValidarFecha() -->
<input name="TxtFecha" type="text" id="TxtFecha" placeholder="YYYYMMDD" maxlength="8" onKeyPress="return SoloNumeros(event);" onKeyUp="ValidarFecha();">
<divn id="Mensaje"></div>
<script>
// Función para permitir sólo números, retroceso y enter
function SoloNumeros(evt){
if(window.event){ //asignamos el valor de la tecla a keynum
keynum = evt.keyCode; //IE
}
else{
keynum = evt.which; //FF
}
//comprobamos si se encuentra en el rango numérico
if((keynum > 47 && keynum < 58) || keynum == 8 || keynum == 13){
return true;
}
else{
return false;
}
}
// Función para verificar que la fecha escrita sea correcta según el formato YYYYMMDD
function ValidarFecha(){
// Almacenamos el valor digitado en TxtFecha
var Fecha = document.getElementById('TxtFecha').value;
var Mensaje = '';
// Si la fecha está completa comenzamos la validación
if(Fecha.length == 8){
var Anio = Fecha.substr(0, 4); // Extraemos en año
var Mes = parseFloat(Fecha.substr(4, 2)) - 1; // Extraemos el mes
var Dia = Fecha.substr(6, 2); // Extraemos el día
// Con la función Date() de javascript evaluamos si la fecha existe
var VFecha = new Date(Anio, Mes, Dia);
// Si las partes de la fecha concuerdan con las que digitamos, es correcta
if((VFecha.getFullYear() == Anio) && (VFecha.getMonth() == Mes) && (VFecha.getDate() == Dia)){
Mensaje = 'Fecha correcta';
}
else{
Mensaje = 'Fecha incorrecta';
}
}
// Mostramos el mesaje
document.getElementById('Mensaje').innerHTML = Mensaje;
}
</script>
</body>
</html>
Demostración
See the Pen Validación fecha en un input con javascript by Leidy Vanessa Briceo Caceres (@vanessgloom) on CodePen.
Bueno el artículo. Gracias
ResponderEliminar