Código de JavaScript - Validar una fecha con HTML5

Imágen de perfil

Validar una fecha con HTML5gráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 21 de Marzo del 2015 por Xavi (Creado el 21 de Mayo del 2013)
19.950 visualizaciones desde el 21 de Mayo del 2013. Una media de 112 por semana
Código que muestra como validar una fecha utilizando el tag type="data" del HTML5.

html5-date

Versión 1
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 21 de Mayo del 2013gráfica de visualizaciones de la versión: Versión 1
19.953 visualizaciones desde el 21 de Mayo del 2013. Una media de 112 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
 
<script type="text/javascript">
/**
 * Funcion que devuelve true o false dependiendo de si la fecha es correcta.
 * Tiene que recibir el dia, mes y año
 */
function isValidDate(day,month,year)
{
    var dteDate;
 
    // En javascript, el mes empieza en la posicion 0 y termina en la 11 
    //   siendo 0 el mes de enero
    // Por esta razon, tenemos que restar 1 al mes
    month=month-1;
    // Establecemos un objeto Data con los valore recibidos
    // Los parametros son: año, mes, dia, hora, minuto y segundos
    // getDate(); devuelve el dia como un entero entre 1 y 31
    // getDay(); devuelve un num del 0 al 6 indicando siel dia es lunes,
    //   martes, miercoles ...
    // getHours(); Devuelve la hora
    // getMinutes(); Devuelve los minutos
    // getMonth(); devuelve el mes como un numero de 0 a 11
    // getTime(); Devuelve el tiempo transcurrido en milisegundos desde el 1
    //   de enero de 1970 hasta el momento definido en el objeto date
    // setTime(); Establece una fecha pasandole en milisegundos el valor de esta.
    // getYear(); devuelve el año
    // getFullYear(); devuelve el año
    dteDate=new Date(year,month,day);
 
    //Devuelva true o false...
    return ((day==dteDate.getDate()) && (month==dteDate.getMonth()) && (year==dteDate.getFullYear()));
}
 
/**
 * Funcion para validar una fecha
 * Tiene que recibir:
 *  La fecha en formato ingles yyyy-mm-dd
 * Devuelve:
 *  true-Fecha correcta
 *  false-Fecha Incorrecta
 */
function validate_fecha(fecha)
{
    var patron=new RegExp("^(19|20)+([0-9]{2})([-])([0-9]{1,2})([-])([0-9]{1,2})$");
 
    if(fecha.search(patron)==0)
    {
        var values=fecha.split("-");
        if(isValidDate(values[2],values[1],values[0]))
        {
            return true;
        }
    }
    return false;
}
 
/**
 * Funcion que es ejecutada desde el botón de validar
 */
function validar()
{
    var fecha=document.getElementById("user_date").value;
    if(validate_fecha(fecha)==true)
        document.getElementById("result").innerHTML="La fecha "+fecha+" es correcta";
    else
        document.getElementById("result").innerHTML="La fecha "+fecha+" es incorrecta";
}
</script>
 
</head>
<body>
    <input type="date" name="user_date" id="user_date" />
    <input type="button" value="validar" onclick="javascript:validar();" />
    <!-- div donde mostraremos el resultado -->
    <div id="result"></div>
</body>
</html>



Comentarios sobre la versión: Versión 1 (3)

carlos
20 de Marzo del 2015
estrellaestrellaestrellaestrellaestrella
buenas tardes, gracias po este aporte pero me queda una duda cual es el formato de fecha que acepta, probe varios y ninguno funciona con , . / - y dia mes año y todos son incorrectos, estoy atento a su respuesta
Responder
Imágen de perfil
Xavi
21 de Marzo del 2015
estrellaestrellaestrellaestrellaestrella
Hola Carlos, esto es HTML5 con el tag DATE, por lo que no te permite poner las barras de separación en la fecha.

Te he adjuntado una imagen para que veas...
Responder
Pablo Iñareta
15 de Septiembre del 2016
estrellaestrellaestrellaestrellaestrella
Un input type date devuelve un string empty si la fecha no es valida, hasta donde yo se, ¿cómo diferencio entonces una fecha que no es válida de una fecha que viene vacia?
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2379