Unos de los errores más comunes que he visto en Javascript es tratar una fecha como una cadena de caracteres. Por eso os presentamos este fragmento de código donde veremos cómo comparar fechas en JavaScript. Recordamos, primero que javascript es un lenguaje no tipado, las variables no tienen tipo y lo más importante que se suele olvidar, es un lenguaje orientado a objetos, no del mismo modo que C++ o Java, los objetos son métodos y propiedades. Y entre muchos objetos propios del lenguaje tenemos el objeto fecha:
|
1 |
var Fecha = new Date(); |
Os dejo el enlace de la w3c sobre este objeto para profundizar más en el si queréis.
Así es que cuando nos planteamos en comparar dos fechas, tenemos que tener en cuenta estas premisas y convertir la cadena fecha en un objeto.
Planteo el siguiente problema, un usuario mete por formulario una fecha y por JavaScript tenemos que comprobar si la fecha es anterior o posterior a la fecha de hoy. Partimos de un HMTL simple, un formulario con un campo para meter la fecha y un botón para enviar el formulario.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> <title>Comparacion Fechas JS</title> <script type="text/javascript" src="script.js"></script> </head> <body> <form id="Formulario" onSubmit="CompararFechas()"> <table> <tr> <th align="left">Introduce Fecha:</th> <th><input id="Fecha" type="text"></input></th> <th><input type="submit" value="Enviar"></input></th> </tr> </table> </form> </body> </html> |
En nuestra función JS, lo primero que debemos hacer es convertir la cadena según el formato esperado (en este caso DD/MM/YYYY) convirtiéndola en un objeto Date y comprobamos si es una fecha correcta. Lo haríamos con las siguientes líneas:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function CompararFechas() { //Comprobamos que tenga formato correcto var Fecha_aux = document.getElementById("Fecha").value.split("/"); var Fecha1 = new Date(parseInt(fecha_aux[2]),parseInt(fecha_aux[1]-1),parseInt(fecha_aux[0])); //Comprobamos si existe la fecha if (isNaN(Fecha1)){ alert("Fecha introducida incorrecta"); return false; } else{ alert("La fecha que has introducido es "+Fecha1); } } |
Como vemos, primero obtenemos los tres campos que forman la fecha separados por la barra / y con los datos obtenidos creamos un objeto Date. Después comprobamos si es una fecha correcta y si no lo es se lo indicamos al usuario y no continúa la función.
Si la fecha es correcta le mostramos la fecha que ha insertado:
Fijaros que muestra muchos más datos que los que hemos insertado, todos de los que se compone el objeto Date que hemos creado.
Si la fecha es correcta el proceso continua y pasamos a comparar la fecha introducida con la fecha actual del sistema:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Hoy = new Date();//Fecha actual del sistema if (Fecha1 < Hoy){ alert ("La fecha introducida es anterior a Hoy"); } else{ if (Fecha1 == Hoy){ alert ("Has introducido la fecha de Hoy"); } else{ alert ("La fecha introducida es posterior a Hoy"); } } |
Si introducís en el formulario la misma fecha que tiene el sistema aparentemente fallara, ya que no os devolverá que has introducido la fecha de hoy. Esto es debido a que estais comparando objetos, y en esa comparación también estas comparando horas, minutos y segundos.
Para solucionar esto deberíamos cambiar el código para comparar año, mes y día. Hay múltiples opciones pero os pongo una sencilla para que se vea bien:
|
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 |
Hoy = new Date();//Fecha actual del sistema var AnyoFecha = Fecha1.getFullYear(); var MesFecha = Fecha1.getMonth(); var DiaFecha = Fecha1.getDate(); var AnyoHoy = Hoy.getFullYear(); var MesHoy = Hoy.getMonth(); var DiaHoy = Hoy.getDate(); if (AnyoFecha < AnyoHoy){ alert ("La fecha introducida es anterior a Hoy"); } else{ if (AnyoFecha == AnyoHoy && MesFecha < MesHoy){ alert ("La fecha introducida es anterior a Hoy"); } else{ if (AnyoFecha == AnyoHoy && MesFecha == MesHoy && DiaFecha < DiaHoy){ alert ("La fecha introducida es anterior a Hoy"); } else{ if (AnyoFecha == AnyoHoy && MesFecha == MesHoy && DiaFecha == DiaHoy){ alert ("Has introducido la fecha de Hoy"); } else{ alert ("La fecha introducida es posterior a Hoy"); } } } } |
Y a partir de aquí ya podéis operar con fechas lo que necesitéis.
