Objeto Date en JavaScript

El objeto Date incluye muchos métodos que son útiles al trabajar con fechas en JavaScript.

Una sola publicación no bastaría para examinar todas las formas de trabajar con fechas, conforme avancemos en el curso iremos viendo muchas de ellas, comenzando por las mas comunes y luego las mas complejas.

La idea es que le pueda sacar el mayor provecho a estos métodos para sus proyectos web.

También tiene que saber que uno de los aspectos desafortunados del objeto Date de JavaScript, es que la aplicación de sus métodos varía mucho en función del navegador y el sistema operativo.

Por ejemplo, considere el siguiente script para devolver una fecha actual, ajustada para la zona horaria local y formateado de forma automática por el método toLocaleDateString():

<!doctype html>
<html>
<head>
   <title>Objeto Date en JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var varDate = new Date();
        alert(varDate.toLocaleDateString());
    </script>
</body>
</html>

Veamos como se visualiza en distintos navegadores:

Las diferencias entre estos cuadros de diálogo puede parecer trivial, pero si estabas esperando usar el día de la semana en el código ( lunes, martes, miercoles, etc), te podrías llevar una gran sorpresa.

Existen diferencias en la aplicación del objeto Date y sus métodos en los navegadores.

Por lo tanto debe verificar sus script en los diferentes entornos, para vizualizar las posibles variaciones.

Argumentos del Objeto Date

El objeto Date admite una serie de argumentos, que van desde cero argumentos hasta siete argumentos.

Recuerde los siguientes puntos cuando se utiliza los argumentos de un objeto Date:

El año se debe administrar con cuatro dígitos a menos que desee especificar un año entre el año 1900 y el año 2000, en cuyo caso usted acaba de enviar en el año de dos dígitos, del 0 al 99, que se añade a continuación a 1900. Así, 2008 es el año 2008, pero el 98 se convirtió en 1998.
El mes está representado por un número entero de 0 a 11, con 0 siendo enero y 11 siendo de diciembre.
El día es un número entero de 1 a 31.
Horas están representados por 0 al 23, donde 23 representa 23:00
Minutos y segundos son enteros que van de 0 a 59.
Los milisegundos son un número entero de 0 a 999.

Veamos otros ejemplos.

Escribir la fecha y hora a una página web

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Objeto Date</title>
</head>
<body>
    <p id="campoTexto">&nbsp;</p>
    <script type = "text/javascript">
        var varDate = new Date();
        var dateString = varDate.toLocaleDateString() + " " + varDate.toLocaleTimeString();
        var dateLoc = document.getElementById("campoTexto");
        dateLoc.innerHTML = "Hola - Esta web se abrio el " + dateString;
    </script>
</body>
</html>

Cuando abra su navegador verá algo como esto:

El JavaScript relacionado con el objeto Date es bastante simple.

Se aprovecha de la método toLocaleDateString (), que ya la hemos visto, y su primo, toLocaleTimeString (), que devuelve la hora local.

Estos dos métodos se concatenan juntos con un único espacio y se coloca en la variable dateString, así:

var dateString = varDate.toLocaleDateString() + " " + varDate.toLocaleTimeString();

Cuenta atrás, para una fecha determinada en el futuro.

Veamos un script que lleve la cuenta regresiva en días para una fecha específica en el futuro:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Objeto Date</title>
</head>
<body>
    <p id="campoTexto">&nbsp;</p>
    <script type = "text/javascript">
        var hoy = new Date();
        var despues = new Date();
        // Enero 1, 2020
        despues.setFullYear(2020,0,1);
        var dif = despues.getTime() - hoy.getTime();
        dif = Math.floor(dif / (1000 * 60 * 60 * 24));
        var dateLoc = document.getElementById("campoTexto");
        dateLoc.innerHTML = "Hay " + dif + " d&iacute;as para el 1/1/2020";
    </script>
</body>
</html>

Note que hemos usado algunas otros objetos de Date "getTime" y Math "Math.floor".

getTime(): es un método que devuelve el número en milisegundos entre la media noche del 1 de enero de 1970 y la fecha especificada.
Math.floor(): devuelve el entero más grande, menor que, o igual, a un número.

Como getTime() devuelve su valor en milisegundos, tenemos que:

Multiplicarlo por 1000 para pasarlo a segundos
Multiplicarlo por 60 para pasarlo a minutos
Multiplicarlo por 60 para pasarlo a horas
Multiplicarlo por 24 para pasarlo a días

var dif = despues.getTime() - hoy.getTime();

El valor de dif está en milisegundos, por eso hay que realizar la operación anterior, y haciendo uso del objeto Math.floor, nos aseguramos que el valor sea un entero.

Dese un tiempo para analizar el código, y si tiene alguna duda, recuerde que puede hacérmelo saber mediante los comentarios y con gusto le ayudare.

Calculando el tiempo de renderizado

El siguiente caso, es interesante, se trata de un script que permite determinar el tiempo de carga de una página web.

<!DOCTYPE html>
<html>
<head>
    <title>the date</title>
    <script type = "text/javascript">
        var inicio = new Date();
        var ahora = inicio.getTime();
    </script>
</head>
<body>
    <p id="campoText">&nbsp;</p>
    <script type = "text/javascript">
        var ultimo = new Date();
        var dif = (ultimo.getTime() - ahora)/1000;
        var tiempoFinal = dif.toPrecision(5);
        var dateLoc = document.getElementById("campoText");
        dateLoc.innerHTML = "La p&aacute;gina se carg&oacute; en " + tiempoFinal + " segundos.";
    </script>
</body>
</html>

Lo que podemos ver es:

Al inicio especificamos dos variables

inicio: fija la hora en la que se abrió la página
ahora: el tiempo en milisegundos de la media noche del 1 de enero de 1970 a la fecha actual almacenada en inicio.

En el segundo script tenemos:

Creamos otra fecha, la cual debido a la secuencia en la que se ejecuta el código es posterior a la primera que especificamos.
Igualmente convertimos el valor de ultimo en milisegundos
En la variable dif, obtenemos la diferencia entre ahora y ultimo

También hacemos uso del método numérico toPrecision el cual da formato a un número con una longitud especificada.

Al usar esta o funciones similares para determinar los tiempos de carga de una página y calcular el valor más exacto, coloque la variable inicial cerca de la parte superior de la página o el script (dentro de head), y luego coloque la otra en la parte inferior de la página

En este tutorial, uted conoció algunos métodos del objeto Date, pues preparece ya que son cerca de 40 métodos.

Como le mencioné al inicio esto es imposible verlos todos de una sola vez, ya que no es humanamente sano. Pero conforme avancemos y las necesidades de nuestros scripts lo vallan requiriendo iremos viendo estos y mas métodos.

De todas formas le dejo una lista de algunos métodos por si tiene curiosidad:

getDate()

Devuelve el día del mes.

getDay()

Devuelve el día de la semana.

getHours()

Retorna la hora.

getMinutes()

Devuelve los minutos.

getMonth()

Devuelve el mes (atención al mes que empieza por 0).

getSeconds()

Devuelve los segundos.

getTime()

Devuelve los milisegundos transcurridos entre el día 1 de enero de 1970 y la fecha correspondiente al objeto al que se le pasa el mensaje.

getYear()

Retorna el año, al que se le ha restado 1900. Por ejemplo, para el 1995 retorna 95, para el 2005 retorna 105. Este método está obsoleto en Netscape a partir de la versión 1.3 de Javascript y ahora se utiliza getFullYear().

getFullYear()

Retorna el año con todos los dígitos. Usar este método para estar seguros de que funcionará todo bien en fechas posteriores al año 2000.

setDate()

Actualiza el día del mes.

setHours()

Actualiza la hora.

setMinutes()

Cambia los minutos.

setMonth()

Cambia el mes (atención al mes que empieza por 0).

setSeconds()

Cambia los segundos.

setTime()

Actualiza la fecha completa. Recibe un número de milisegundos desde el 1 de enero de 1970.

setYear()

Cambia el año recibe un número, al que le suma 1900 antes de colocarlo como año de la fecha. Por ejemplo, si recibe 95 colocará el año 1995. Este método está obsoleto a partir de Javascript 1.3 en Netscape. Ahora se utiliza setFullYear(), indicando el año con todos los dígitos.

setFullYear()

Cambia el año de la fecha al número que recibe por parámetro. El número se indica completo ej: 2005 o 1995. Utilizar este método para estar seguros que todo funciona para fechas posteriores a 2000.

El objeto Date también tiene varios métodos para convertir la fecha en una cadena con un formato diferente.

Ya ha revisado algunos de estos métodos, como toLocaleDateString ().

Otros métodos similares incluyen toLocaleString(), toLocaleTimeString(), toString(), toISOString(), toDateString(), toUTCString(), y toTimeString().

Siéntase libre de experimentar con ellos:

<!DOCTYPE html>
<html>
<head>
    <title>Objeto Date</title>
</head>
<body>
    <p id="campoText">&nbsp;</p>
    <script type = "text/javascript">
        var varDate = new Date(); alert(varDate.toLocaleDateString());
        var varDate = new Date(); alert(varDate.toLocaleString());
        var varDate = new Date(); alert(varDate.toGMTString());
        var varDate = new Date(); alert(varDate.toLocaleTimeString());
        var varDate = new Date(); alert(varDate.toString());
        var varDate = new Date(); alert(varDate.toISOString());
        var varDate = new Date(); alert(varDate.toDateString());
        var varDate = new Date(); alert(varDate.toUTCString());
        var varDate = new Date(); alert(varDate.toTimeString());
    </script>
</body>
</html>

Recuerde que la parte mas importante de estos tutoriales es la práctica, y la única manera de que logre su independencia como programador, es una vez aprendida la teoría:

"Ha experimentar se ha dicho"