Métodos del Objeto Date de Javascript

En este tutorial aprenderemos los métodos del objeto Date de javaScript, analizaremos todos y cada uno de ellos, usaremos ejemplos prácticos , e intentaremos comprender de manera fugaz los métodos set y get de los objetos también aprenderemos a trabajar con fechas, mediante la realización de 2 sencillos ejercicios.

La decisión de hacer un tutorial sobre el objeto Date, siendo una cosa tan vista y con tanta información publicada en la red, ha sido, que en Clab no he visto ningún tutorial concreto sobre ello, y veo a gente de vez en cuando preguntar cosas sencillas sobre las fechas y cómo trabajar con ellas. Además, así aprovecho y me vale de introducción al tutorial que estoy desarrollando, para crear un calendario en jQuery desde cero, de modo que los interesados estad atentos.

¿Quién debería leer este tutorial y quién no?

Caso A: Si de vez en cuando vas andando por la calle, y oyes una voz susurrar a tú oído ddddaaaatttteee, y eso te causa escalofríos incontrolables. No te preocupes, es buena señal, tu eres el target perfecto de este tutorial.
Caso B: Si estás buscando información sobre el objeto Date, pero para otro lenguaje, igual no te viene mal, echarle 15 minutillos a este tuto, y debido a las similitudes entre los lenguajes igual le sacas provecho y todo.

1. El objeto Date

Para comenzar vamos a ver cómo almacenar un objeto date con la fecha actual en una variable y también veremos que nos muestra la consola de depuración si imprimimos esa variable.

Código :

//Creamos una variable y almacenamos la fecha de hoy (paréntesis vacío)
var fechaHoy = new Date();
//Imprimimos la variable en la consola
console.log(fechaHoy);

Si quisiéramos configurar una fecha diferente a la actual, le pasaríamos los parámetros a Date de la siguiente manera:

Código :

var fechaRequerida = new Date(año, mes, día, horas, minutos, segundos, milisegundos)

//O con un total de milisegundos que contarán a partir del 1 de enero de 1970
//Por ejemplo 1334968890477, estaría dentro del 21 de Abril de 2012
var fechaPorMilisegundos = new Date(1334968890477)

¿Cómo funciona el objeto Date?

Aquí hay varias cosas a tener en cuenta:

1. El mínimo de variables que se le pueden pasar al objeto Date para que funcione correctamente son 2, el año y el mes, introducidos éstos, a todos los que dejemos vacíos javascript los rellenará con la fecha más cercana al primer milisegundo del día 1 del mes del año introducidos
2. Si sólo se introduce el año, javascript rellenará la fecha con el 1 de enero de 1970, que es la hora universal del objeto Date, pues le estará sumando a esta fecha entre 1 y 9999 milisegundos que serán los años que pongáis
3. Los meses van de 0 a 11, es decir, 0 = enero, 11 = diciembre
4. Los días del mes funcionan normal, del 1 al 31
5. Los segundos y minutos van de 0 a 59
6. Los milisegundos van de 0 a 999

Bien, vamos también a imprimir, nuestra fecha requerida en la consola:

Código :

console.log(fechaRequerida)

Y la consola nos imprimirá lo siguiente en ambos casos:

Que no es ni de lejos lo que queremos ver, aun así sabemos que contiene una fecha, pues nos lo está diciendo la consola. Así que vamos a ver los métodos y al final sabremos cómo trabajar con el objeto date.

2. Los métodos del objeto Date

¿Qué son los métodos de un objeto?

Que nadie se asuste, los métodos son simples funciones incluidas dentro de un objeto, que desempeñan diferentes acciones.
Imaginemos que tenemos un robot, este será nuestro objeto Abducted. Abducted tiene programado un método que le hace decir algo, y otro que le dice lo que debe decir, vamos a verlo en pseudo-código:

Código :

Abducted {
   private var tipoDeFrase:Frase = 'una parida';
   
   function get decirCosa ():Frase {
      return tipoDeFrase
   }
   
   function set queDecir (nuevoTipoDeFrase:Frase):void {
      tipoDeFrase = nuevoTipoDeFrase
   }
}

Código :

//Ok, ahora tú me ordenarías:
Abducted.decirCosa()
//Y yo te respondería cual esclavo:
'van 2 y se cae el de en medio'

//Como ves te estaría diciendo un parida, pues es lo que tendría configurado por defecto.

//Ahora bien, tú podrías ordenarme:
Abducted.queDecir('algo inteligente')

//Si después me volvieras a ordenar:
Abducted.decirCosa()
//A diferencia de la vez anterior, yo te respondería:
'No hay nada de malo en pasar por tonto, si en realidad lo que uno está haciendo es inteligente'

Como veis los métodos o funciones get sirven para pedirle datos a Abducted, sin embargo los set nos valen para cambiar una variable o propiedad de Abducted.
Espero que os haya gustado mi explicación casera breve e incompleta, sobre qué son los métodos get y set de un objeto. Y si he conseguido expresarme con claridad, veremos mucho más rápido los métodos a continuación.

Tipos de métodos del objeto Date

Vamos a intentar dividir los métodos del objeto Date en 4 grupos (esta sub-división no es ninguna convención ni nada parecido, es simplemente que me parece más sencillo explicarlo así, si sí son una convención, pues bueno, entonces he pensado lo mismo que muchos):

• A. Métodos para obtener o cambiar los valores del objeto Date
• B. Métodos para obtener fechas lectibles
• C. Métodos para trabajar con fechas en milisegundos
• D. Métodos desfasados

A. Métodos para obtener o cambiar valores del objeto Date

Vamos a ver rápidamente los nombres simples de estos métodos (así no se pueden usar).

• FullYear
• Month
• Date
• Day
• Hours
• Minutes
• Seconds
• Milliseconds

Todos estos métodos se pueden usar de 4 maneras, 2 formas de get y 2 formas de set, a excepción de Day que sólo se pueden usar los get.

Voy a tomar como ejemplo Date y Day. Los get los podemos usar de 2 maneras:

Código :

getDate()
getUTCDate()

getDay()
getUTCDay()

Y los set se usan igual, pero como acabo de explicar que los Day son los únicos que no tienen set, nos quedamos sin ellos en este ejemplo ya que no existen como métodos:

Código :

setDate()
setUTCDate()

Bien, alguno se preguntará ¿y qué maldita diferencia hay entre poner UTC o no ponerlo?. Como trabajamos con fechas, tenemos que tener en cuenta que ahora mismo no es la misma hora en todo el mundo. Por lo tanto cuando trabajemos con fechas, la diferencia entre ponerlo o no, radica en que si no se pone estarás usando tu franja horaria (que es lo más normal), y si lo pones pedirás esa fecha en la hora universal (UTC - Universal Time Coordinated), que es GTM+0 (La del meridiano 0 o meridiano de Greenwich)
Wikipedia UTC

Ahora veamos a qué dato dentro de una fecha corresponde cada uno de los métodos que acabamos de ver, e iremos viendo ejemplos:
(Los links a partir de aquí, son links a ejemplos prácticos en los que podréis usar los métodos a vuestro antojo)

FullYear

Usos: getFullYear() | getUTCFullYear() | setFullYear() | setUTCFullYear()


Código :

//Obtiene el año en 4 dígitos
getFullYear()
getUTCFullYear()
//Configura la fecha a partir de año
setFullYear(año, mes, diaMes)
setUTCFullYear(año, mes, diaMes)




Month

Usos: getMonth() | getUTCMonth() | setMonth() | setUTCMonth()


Código :

//Obtiene el mes (de 0 a 11)
getMonth()
getUTCMonth()
//Configura la fecha a partir del mes
setMonth(mes, diaMes)
setUTCMonth(mes, diaMes)




Date

Usos: getDate() | getUTCDate() | setDate() | setUTCDate()


Código :

//Obtienen el día del mes (de 1 a 31)
getDate()
getUTCDate()
//Configuran la fecha con el día
setDate(diaMes)
setUTCDate(diaMes)




Day

Usos: getDay() | getUTCDay()


Código :

//Obtienen el día de la semana (de 0 = Domingo a 6 = sábado)
getDay()
getUTCDay()




Hours

Usos: getHours() | getUTCHours() | setHours() | setUTCHours()


Código :

//Obtienen las horas (de 0 a 23)
getHours()
getUTCHours()
//Configuran la hora a partir de las horas
setHours(horas, minutos, segundos, milisegundos)
setUTCHours(horas, minutos, segundos, milisegundos)




Minutes

Usos: getMinutes() | getUTCMinutes() | setMinutes() | setUTCMinutes()


Código :

//Obtienen los minutos (de 0 a 59)
getMinutes()
getUTCMinutes()
//Configuran la hora a partir de los minutos
setMinutes(minutos, segundo, milisegundos)
setUTCMinutes(minutos, segundos, milisegundos)




Seconds

Usos: getSeconds() | getUTCSeconds() | setSeconds() | setUTCSeconds()


Código :

//Obtienen los segundos (de 0 a 59)
getSeconds()
getUTCSeconds()
//Configuran la hora a partir de los segundos
setSeconds(segundos, milisegundos)
setUTCSeconds(segundos, milisegundos)




Miliseconds

Usos: getMiliseconds() | getUTCMiliseconds() | setMiliseconds() | setUTCMiliseconds()


Código :

//Obtienen los milisegundos (de 0 a 999)
getMiliseconds()
getUTCMiliseconds()
//Configuran la hora a partir de los milisegundos
setMiliseconds(milisegundos)
setUTCMiliseconds(milisegundos)


Dentro de esta categoría también metería este último método


setTime()

Usos: setTime()


Código :

//setTime nos vale para configurar una fecha sumando o restando x milisegundos al milisegundo 1 del 1 de enero de 1970
//así si un día tiene 86.400.000 milisegundos, haciendo esto
var mas1Dia = new Date();
mas1Dia.setTime(86400000);
//Si imprimiéramos mas1Dia de una manera lectible, veríamos que mas1Dia = 2 de enero de 1970
console.log(mas1dia.toDateString());
DEVUELVE--> Fri Jan 02 1970

B. Métodos para obtener fechas legibles

Bueno, ya hemos visto como configurar y modificar el objeto date, y obtener datos precisos de él, ahora vamos a ver cómo obtener estos datos de tal manera que casi cualquier humano, pueda leerlos. Los métodos para conseguir esto sin morir en el intento, siempre devuelven un string, son los siguientes:

• toString()
• toUTCString()
• toTimeString()
• toDateString()
• toLocaleString()
• toLocaleDateString()
• toLocaleTimeString()
• toISOString()
• toJSON()

Ahora que hemos visto sus nombres (y alguno hasta habrá trasteado con los ejemplos prácticos), vamos a generar una fecha de hoy y a pasarla por cada uno de los métodos y veremos lo que obtenemos. A partir de ahora la fecha "Hoy" que se usará para los ejemplos y ejercicios será el 21 de Abril de 2012 y me encuentro en Madrid, España, las horas nos dan más o menos igual, aunque ahora mismo es muy, muy tarde .

Código :

//Creamos la fecha de hoy
var fechaDeHoy = new Date()

//toString() devuelve el objeto completo en nuestra franja horaria
console.log(fechaDeHoy.toString());
//SALIDA ---> 'Sat Apr 21 2012 04:50:14 GMT+0200 (Hora de verano romance)'

//toString() devuelve el objeto completo en GMT+0 ó UTC
console.log(fechaDeHoy.toUTCString());
//SALIDA ---> 'Sat, 21 Apr 2012 02:50:14' GMT'

//toLocaleString() devuelve el objeto completo, de acuerdo a las convenciones locales
console.log(fechaDeHoy.toLocaleString());
//SALIDA ---> 'Sat Apr 21 2012 04:50:14' GMT+0200 (Hora de verano romance)'

//toTimeString() devuelve las horas minutos y segundos y franja horaria
console.log(fechaDeHoy.toTimeString());
//SALIDA ---> '04:50:14' GMT+0200 (Hora de verano romance)'

//toDateString() devuelve el día de la semana, día del mes, el mes, y el año
console.log(fechaDeHoy.toDateString());
//SALIDA ---> 'Sat Apr 21 2012'

//toLocaleDateString() devuelve el día de la semana, día del mes, el mes, y el año, de acuerdo a las convenciones locales
console.log(fechaDeHoy.toLocaleDateString());
//SALIDA ---> 'Saturday, April 21, 2012'

//toLocaleTimeString() devuelve las horas minutos, segundos y franja horaria, de acuerdo a las convenciones locales
console.log(fechaDeHoy.toLocaleTimeString());
//SALIDA ---> '04:50:14'

//toISOString devuelve la fecha formateada con el starndard ISO
console.log(fechaDeHoy.toISOString());
//SALIDA ---> '2012-04-21T02:50:14.007Z'

//toJSON devuelve la fecha formateada como fecha JSON
console.log(fechaDeHoy.toJSON());
//SALIDA ---> '2012-04-21T02:50:14.007Z'

C. Métodos para trabajar con fechas en milisegundos

Los siguientes métodos nos devolverán milisegundos y todos ellos estarán basados en torno a la fecha universal del objeto Date de la que ya hemos hablado con anterioridad.
(No os asustéis, al final del tuto en los ejercicios crearemos una sencilla función que nos ayudarán mucho en nuestros cálculos con milisegundos)
Estos métodos son:

• getTime()
• UTC()
• valueOf()
• parse()
• getTimezoneOffset()

Vale, vamos a ver de rápidamente cómo usarlos y que obtenemos de cada uno, en la última parte del tuto ya trabajaremos con las fechas

Código :

//Primero creamos una fecha con el día de "Hoy".
var fechaHoy = new Date();

//1º - getTime() - sin parámetros
console.log(fechaHoy.getTime());
//SALIDA -->  1334968890477

//2º - UTC(año, dia, mes) - 3 parámetros
console.log(Date.UTC(2012, 21, 3));
//SALIDA -->  1380758400000

//3º - valueOf() - sin parámetros
console.log(fechaHoy.valueOf());
//SALIDA -->  1334968890477

//4º - parse('fecha en string') - 1 parámetro
console.log(Date.parse('april 21,  2012'));
//SALIDA -->  1334959200000

//Hasta aquí todas las salidas que hemos recibido, son la cantidad de milisegundos desde el 1 de enero de 1970, hasta la fecha sobre la que estemos aplicando el método.

//5º - getTimeZoneOffset() - sin parámetros
console.log(fechaHoy.getTimezoneOffset());
//SALIDA -->  -120
//Este es el único de los métodos que estamos viendo que no devuelve milisegundos, devuelve la diferencia en minutos entre nuestra franja horaria y la hora UTC, en mi caso, como estoy en GMT+2, -120 minutos

D. Métodos desfasados

No nos hace falta saber que hacen, lo único que necesitamos es que nos chirríen los ojos si lo vemos escrito por algún sitio, porque seguro que nosotros no lo ponemos.

• getYear()
• setYear()
• toGMTString()

Bueno, bueno, bueno, pues con esto hemos terminado nuestro aprendizaje teórico del objeto Date, ahora sólo nos queda un poquito de práctica. Vamos a hacer algún ejercicio.

3. Ejercicios

Ejercicio1 - Ejercicios sencillos

Empezaremos con unos ejercicios sencillos que no precisen de cálculos

1. Crear variable "fechaHoy" con fecha de hoy
2. Crear variable "fecha85" que sume 85 días a la variable "fechaHoy"
3. Crear variable "fecha187" que reste 187 días variable "fechaHoy"
4. Sumar 2 años a la variable "fecha85"
5. Restar 24 horas a la variable "fecha187"
6. Crear variable "fechaResto" que sea la resta de fecha85 - fecha187 y observa lo que obtienes
7. imprimir en la consola cada paso

Resultados:

Código :

//a)
var fechaHoy = new Date();
console.log(fechaHoy.toString());
console.log('');

//b)
var fecha85 = new Date(fechaHoy);
fecha85.setDate(85);
console.log(fecha85.toString());
console.log('');

//c)
var fecha187 = new Date(fechaHoy);
fecha187.setDate(-187);
console.log(fecha187.toString());
console.log('');

//d)
fecha85.setFullYear(fecha85.getFullYear()+2);
console.log(fecha85.toString());
console.log('');

//e)
fecha187.setHours(fecha187.getHours()-25);
console.log(fecha187.toString());
console.log('');

//f)
var fechaResto = new Date(fecha85-fecha187);
console.log(fechaResto.toString());

Ejercicio - Ejercicio medio

si alguna vez tenemos la necesidad de trabajar con milisegundos, ya sabemos cómo obtenerlos y como configurarlos en una fecha, ahora voy a plantear una función que facilite el trabajo con esos milisegundos.
Lo primero, vamos a ver que son milisegundos y que significan en tiempo.

• 1.000 milisegundos = 1 segundo = 1000x1
• 60.000 milisegundos = 1 minuto = 1000x60
• 3.600.000 milisegundos = 1 hora: = 1000x60x60
• 86.400.000 milisegundos = 1 día = 1000x60x60x24
• 31.536.000.000 milisegundos = 1 año = 1000x60x60x24x365

Vale pues vamos a crear una función que nos convierta los milisegundos a todas esas unidades y viceversa

Código :

//La preparamos para que pueda funcionar en los 2 sentidos, convertir milisegundos a unidades y unidades a milisegundos, por lo que además de la cantidad de unidades y el tipo de unidades le pasaremos un modo
function convertirMilisegundos (cantidad, unidad, modo) {
   //Configuramos la función para que si no la pasamos exactamente 3 parámetros, nos dé una alerta
   if (arguments.length != 3) {
      //Preparamos la alerta
      alert('La función convertirMilisegundos requiere exactamente 3 parámetros\ncantidad, unidad, modo');
      //Salimos de la función sin hacer nada más
      return false
   }
   //Declaramos una variable vacia donde almacenaremos el valor por el que multiplicaremos o dividiremos nuestra cantidad
   var valor;
   //Detectamos la unidad a usar e inicializamos valor
   switch (unidad) {
      case 'se': valor = 1000; break;
      case 'mi': valor = 60000; break;
      case 'ho': valor = 3600000; break;
      case 'di': valor = 86400000; break;
      case 'an': valor = 31536000000; break;
   }
   //Detectamos el modo, y devolvemos la operación
   switch (modo) {
      case 'mu': return catidad/valor; break;
      case 'um': return catidad*valor; break;
   }
   
}

Y la usaríamos así, imaginad que vuestra empresa tiene 2 objetos Date con una hora de salida y una hora de entrada de un día cualquiera y el jefe os pide la diferencia en minutos y días, después os dice que multipliquéis esas horas por 5 días que tiene la semana y se lo devolváis en milisegundos para saber cuánto habéis vagueado en el trabajo esta semana. Nosotros obedecemos como un perrito faldero.

Código :

//Primero tenemos los 2 objetos Date que la maldita máquina de fichar del curro no perdona a la hora de comer
var horaA = new Date(2012, 3, 21, 14, 00, 00);
var horaB = new Date(2012, 3, 21, 18, 26, 35);
//Como veréis nos hemos retrasado un poco con la siesta

//Bien, almacenamos las 2 fechas como milisegundos en nuevas variables
var milisecsA = horaA.getTime();
var milisecsB = horaB.getTime();

//Y ahora a la fecha mayor le restamos la menor, para obtener el intervalo de milisegundos que hay entre las 2
var milisecInter = horaB-horaA;

//Ahora nos ha pedido la diferencia en minutos y días
//Muy bien, pues nosotros que somos más eficientes y más chulos que nadie, escribimos:
var enMinutos = convertirMilisegundos(milisecInter, 'mi', 'mu');
console.log(enMinutos);
//SALIDA --> 266.5833333333333

var enDias = convertirMilisegundos(milisecInter, 'di', 'mu');
console.log(enDias);
//SALIDA --> 0.18512731481481481

//Y ahora nos ha pedido que lo multipliquemos por 5 y se lo devolvamos en milisegundos
var por5 = convertirMilisegundos(enDias*5, 'di', 'um');
console.log(por5);
//SALIDA --> 79975000

Y debido a nuestra eficiencia, el jefe nos perdona las siestas.
Como veréis todo es bastante sencillo, espero que os haya gustado y que le saquéis provecho.

Un saludo.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.