website stats » Validar formato de fecha con Javascript | Solo Código |

Validar formato de fecha con Javascript

Escrito por J.F. el Monday, 10 de December del 2007 a las 20:20

Un ejemplo, mediante el uso de 2 funciones, para validar que el formato de una fecha sea válido (mm/dd/aaaa) con Javascript. Tan solo necesita recibir el objeto, y al salir del campo valida si la fecha tiene un formato correcto o no. Las funciones Javascript a usar son las siguientes:

JavaScript:
  1. function esFechaValida(fecha){
  2.     if (fecha != undefined && fecha.value != "" ){
  3.         if (!/^\d{2}\/\d{2}\/\d{4}$/.test(fecha.value)){
  4.             alert("formato de fecha no válido (dd/mm/aaaa)");
  5.             return false;
  6.         }
  7.         var dia  =  parseInt(fecha.value.substring(0,2),10);
  8.         var mes  =  parseInt(fecha.value.substring(3,5),10);
  9.         var anio =  parseInt(fecha.value.substring(6),10);
  10.  
  11.     switch(mes){
  12.         case 1:
  13.         case 3:
  14.         case 5:
  15.         case 7:
  16.         case 8:
  17.         case 10:
  18.         case 12:
  19.             numDias=31;
  20.             break;
  21.         case 4: case 6: case 9: case 11:
  22.             numDias=30;
  23.             break;
  24.         case 2:
  25.             if (comprobarSiBisisesto(anio)){ numDias=29 }else{ numDias=28};
  26.             break;
  27.         default:
  28.             alert("Fecha introducida errónea");
  29.             return false;
  30.     }
  31.  
  32.         if (dia>numDias || dia==0){
  33.             alert("Fecha introducida errónea");
  34.             return false;
  35.         }
  36.         return true;
  37.     }
  38. }

JavaScript:
  1. function comprobarSiBisisesto(anio){
  2. if ( ( anio % 100 != 0) && ((anio % 4 == 0) || (anio % 400 == 0))) {
  3.     return true;
  4.     }
  5. else {
  6.     return false;
  7.     }
  8. }

La segunda tan sólo verifica si el año es bisiesto, para permitir en Febrero poner 28 ó 29 días. Aquí tienes un código de ejemplo, que al salir del campo verifica si lo escrito en el campo de texto tiene el formato de fecha dd/mm/aaaa.

HTML:
  1. function esFechaValida(fecha){
  2.     if (fecha != undefined && fecha.value != "" ){
  3.         if (!/^\d{2}\/\d{2}\/\d{4}$/.test(fecha.value)){
  4.             alert("formato de fecha no válido (dd/mm/aaaa)");
  5.             return false;
  6.         }
  7.         var dia  =  parseInt(fecha.value.substring(0,2),10);
  8.         var mes  =  parseInt(fecha.value.substring(3,5),10);
  9.         var anio =  parseInt(fecha.value.substring(6),10);
  10.  
  11.     switch(mes){
  12.         case 1:
  13.         case 3:
  14.         case 5:
  15.         case 7:
  16.         case 8:
  17.         case 10:
  18.         case 12:
  19.             numDias=31;
  20.             break;
  21.         case 4: case 6: case 9: case 11:
  22.             numDias=30;
  23.             break;
  24.         case 2:
  25.             if (comprobarSiBisisesto(anio)){ numDias=29 }else{ numDias=28};
  26.             break;
  27.         default:
  28.             alert("Fecha introducida errónea");
  29.             return false;
  30.     }
  31.  
  32.         if (dia>numDias || dia==0){
  33.             alert("Fecha introducida errónea");
  34.             return false;
  35.         }
  36.         return true;
  37.     }
  38. }
  39.  
  40. function comprobarSiBisisesto(anio){
  41. if ( ( anio % 100 != 0) && ((anio % 4 == 0) || (anio % 400 == 0))) {
  42.     return true;
  43.     }
  44. else {
  45.     return false;
  46.     }
  47. }
  48. </script>
  49. </head>
  50.  
  51. <input type="text" onBlur="esFechaValida(this);"/>
  52. </body>
  53.  
  54. </html>

Comentarios (39)

Categoria: Javascript

39 Comentarios

Entradas relacionadas


Comentario de Manuel Salazar

Realizado el Sunday, 18 de May del 2008 a las 0:58

¡Excelente!, era lo que necesitaba, muy limpio y profesional, me sirvió mucho, felicidades y muchas GRACIAS.

Comentario de J.F.

Realizado el Sunday, 25 de May del 2008 a las 13:37

De nada, un saludo.

Comentario de Enrique Arriaga

Realizado el Friday, 20 de June del 2008 a las 18:29

Muchas gracias. Muy útil.
Felicidades.

Comentario de Alejandro

Realizado el Wednesday, 6 de August del 2008 a las 9:23

necesitaría saber como validar varias fechas a la vez en un formulario, tengo 6 fechas y desearía validarlas.
Desde ya muchas gracias por todo.

Comentario de Alejandro

Realizado el Wednesday, 6 de August del 2008 a las 9:36

Gracias recien me doy cuenta de la forma!!!!

Comentario de Nero

Realizado el Wednesday, 12 de November del 2008 a las 4:34

Muy prolijo y bien realizado, perfecto! ;)

Comentario de Daniel

Realizado el Wednesday, 26 de November del 2008 a las 21:34

Excelente codigo ;-) . Me sirvio de mucho

Comentario de Santi

Realizado el Tuesday, 13 de January del 2009 a las 12:40

Excelente! Sencillo y eficaz aún sabiendo lo justo de javascript.

Comentario de Rober

Realizado el Tuesday, 3 de February del 2009 a las 12:36

Mira que hay maneras de hacer las cosas, y sólo una la óptima. Enhorabuena por el script, tanto por sencillez como por eficacia

Comentario de Gloria

Realizado el Thursday, 2 de April del 2009 a las 0:20

Gracias, me sirvió de mucho! nada complicado, sencillo y al punto

Comentario de Diego

Realizado el Tuesday, 12 de May del 2009 a las 23:13

la raja socio, ercelente kode

bueno, bonito y barato :P

saludos

Comentario de geniusdraw

Realizado el Saturday, 23 de May del 2009 a las 6:20

muchas gracias por la informacion, me sirvio muchisimo, saludos

Comentario de carles

Realizado el Tuesday, 9 de June del 2009 a las 9:26

Muy bueno me fue muy util gracias.

Comentario de Kelvin

Realizado el Wednesday, 29 de July del 2009 a las 21:27

This code is so very well :) RECOMMENDED!!!

Comentario de Monardes

Realizado el Tuesday, 13 de October del 2009 a las 15:28

El codigo es muy claro y preciso me ayudó mucho!!

gracias!!

Comentario de Pichel30

Realizado el Thursday, 5 de November del 2009 a las 22:40

Muchas gracias excelente codificación, muy limpia y clara

Comentario de Marvin Castillo

Realizado el Monday, 9 de November del 2009 a las 1:55

Buen código … gracias!

Comentario de mon

Realizado el Wednesday, 2 de December del 2009 a las 18:51

Excelente!! Me ha servido de gran ayuda

Comentario de NitroBSD

Realizado el Thursday, 17 de December del 2009 a las 23:02

Gracias !!!!!!!! Me uno al comentario de Pichel30 — Codificacion muy limpia y clara –

Comentario de Tony

Realizado el Wednesday, 24 de February del 2010 a las 19:57

Gracias!!..gran aporte y de mucha ayuda…informacion asi es la que necesitamos.

Comentario de Lutaj

Realizado el Friday, 26 de March del 2010 a las 0:32

Fantástico!! Funciona sin ningún problema. Gracias.

Comentario de Claudio

Realizado el Friday, 7 de May del 2010 a las 21:34

Muy buen codigo, gracias

Comentario de Pro

Realizado el Tuesday, 18 de May del 2010 a las 18:18

La funcion esta muy bien solo que cuando se le coloca la fecha 29/02/2000 que es año bisiesto y fecha correcta, la funcion retorna el mensaje de fecha no valida, hay que corregir que no mande ese error con esa fecha que es completamente valida en el calendario.

Comentario de Has hecho mal el algoritmo del año bisiesto , te pongo la corrección

Realizado el Wednesday, 19 de May del 2010 a las 17:52

function comprobarBisiesto(ano){
if(ano % 4 == 0)
{
if ((ano % 100 == 0) && (ano % 400 != 0))
{
return false;
}
else return true;
}
else return false;
}

Comentario de Daniel

Realizado el Saturday, 15 de January del 2011 a las 14:10

Esta genial, muy claro, pero yo tengo un problema con la comprobación siguiente:

if (!/^\d{2}\/\d{2}\/\d{4}$/.test(fecha.value))

Siempre me dice que el formato de fecha no es válido, por lo que supongo que esta comprobación está incorrecta, ya que me he limitado a copiar-pegar, y he introducido la fecha con / como indica, pero nada.

Comentario de Cantrell

Realizado el Monday, 31 de January del 2011 a las 2:14

Daniel… tu problema es fecha.value
cambialo por fecha solamente.

Comentario de cesver

Realizado el Tuesday, 8 de March del 2011 a las 2:12

Gracias, me fue de gran ayuda …..

Comentario de german

Realizado el Monday, 21 de March del 2011 a las 9:00

esta wea no la hisiste tu deja de robarte los creditos perdedor

Comentario de Cristian Andonaegui

Realizado el Saturday, 10 de September del 2011 a las 23:42

Muchas gracias por elk aporte pero me ocurre que siempre me manda error de formato no valido, quite tambien el fecha.value y nada, si alguien me puediera ayudar estaría agradecido.

Comentario de francisco

Realizado el Wednesday, 14 de September del 2011 a las 20:10

GRANDE MAESTRO!!!!!!!!!!!!!!!

Comentario de john

Realizado el Thursday, 1 de December del 2011 a las 18:45

muchisimas gracias… justo lo que necesitaba

Comentario de carlos

Realizado el Wednesday, 4 de January del 2012 a las 20:15

mi problema es q primero valido codigo de equipo y nombre son dos funciones y despues fecha y siempre me sale lo mismo fecha invalida si alguien me puede ayudar..

function validacion(formulario) {

//letra, numero,
var codequipo = /^([a-zA-Z0-9_ ])+$/ //letra, numero,
var nombreequipo = /^([a-z]|[A-Z]|á|é|í|ó|ú|ñ|ü|\s|\.|-)+$/ //letras, ‘.’ y ‘-’ o vacio
var descripcion = /^([a-zA-Z0-9_ \s])+$/ //letras, ‘.’ y ‘-’ o vacio
//fechas, formato dd/mm/aaaa o d/m/aa

for(x = 1; x 50) {
alert(‘La lontitud máxima permitida para cualquier campo es de 10 caracteres.’)
return false
}
}

if(!codequipo.test(formulario.codequipo.value)) {
alert(‘Contenido del campo Codequipo no válido.’)
return false
}
if(!nombreequipo.test(formulario.nombreequipo.value)) {
alert(‘Contenido del campo NOMBRE EQUIPO no válido.’)
return false
}

if(!descripcion.test(formulario.descripcion.value)) {
alert(‘Contenido del campo DESCRIPCION no válido. Debe contener letra y numero’)
return false
}

return true

//cambiar por return true para ejecutar la accion del formulario
}

function esFechaValida(fechaingreso){
if (fechaingreso != undefined && fechaingreso.value != “” ){
if (!/^\d{2}\/\d{2}\/\d{4}$/.test(fechaingreso)){
alert(“formato de fecha no válido (dd/mm/aaaa)”);
return false;
}
var dia = parseInt(fechaingreso.value.substring(0,2),10);
var mes = parseInt(fechaingreso.value.substring(3,5),10);
var anio = parseInt(fechaingreso.value.substring(6),10);

switch(mes){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
numDias=31;
break;
case 4: case 6: case 9: case 11:
numDias=30;
break;
case 2:
if (comprobarSiBisisesto(anio)){ numDias=29 }else{ numDias=28};
break;
default:
alert(“Fecha introducida errónea”);
return false;
}

if (dia>numDias || dia==0){
alert(“Fecha introducida errónea”);
return false;
}
return true;
}
}

function comprobarSiBisisesto(anio){
if ( ( anio % 100 != 0) && ((anio % 4 == 0) || (anio % 400 == 0))) {
return true;
}
else {
return false;
}
}

Comentario de carlos

Realizado el Wednesday, 4 de January del 2012 a las 20:27

Este el formulario

Comentario de Santiago de la Cruz

Realizado el Thursday, 9 de February del 2012 a las 19:28

Gracias por tu aporte. Me sirvió de mucho.

Saludos…

Comentario de Javier López

Realizado el Friday, 9 de March del 2012 a las 13:02

Muchas gracias por el aporte.

Para novatos en JS como yo, la gente como tu nos salváis la vida.

Saludos

Comentario de sungurue

Realizado el Monday, 16 de April del 2012 a las 20:42

Hola Gracias por tu aporte, me sirvio :)

Comentario de Alexander

Realizado el Tuesday, 24 de April del 2012 a las 7:46

Aqui les dejo una funcion para validar horas en el formato 00:00 de 0 a 24 horas espero les sirva

function hora(elemento){
var horas = false;
var puntos = false;
var minutos = false;
var cadena = elemento.value;
if(cadena.charAt(0) == ’0′ || cadena.charAt(0) == ’1′){
if( cadena.charAt(1) >= ’0′ && cadena.charAt(1) = ’0′
&& cadena.charAt(1) = ’0′ && cadena.charAt(3) = ’0′ && cadena.charAt(4) 5){
alert(‘Formato de hora no valido’);
elemento.value = “00:00″;
}
}

function inicioHora(elemento){
elemento.value = “00:00″;
}

Hora:

Comentario de Alexander

Realizado el Tuesday, 24 de April del 2012 a las 7:48

en cuanto al anterior codigo q

Comentario de Alexander

Realizado el Tuesday, 24 de April del 2012 a las 7:57

function hora(elemento){
var horas = false;
var puntos = false;
var minutos = false;
var cadena = elemento.value;
if(cadena.charAt(0) == ’0′ || cadena.charAt(0) == ’1′){
if( cadena.charAt(1) >= ’0′ && cadena.charAt(1) = ’0′
&& cadena.charAt(1) = ’0′ && cadena.charAt(3) = ’0′ && cadena.charAt(4) 5){
alert(‘Formato de hora no valido’);
elemento.value = “00:00″;
}
}

Escribir un comentario

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Solo Código

Solo Código es una colección de códigos de todo tipo que pueden resultar útiles para el diseño de páginas web. Está enfocado tanto para aquellos que son expertos, como para aquellos principiantes que quieren encontrar recursos útiles, o no saben implementar determinadas funciones en sus webs. No olvides que Solo Código es un blog de Informática Práctica, donde tenemos otras secciones interesantes como:
| Tutoriales | Trucos | Software | Links | Buscar |