¿Te resulta difícil trabajar con fechas en JavaScript? ¿Te gustaría poder hacerlo a pelo, sin tener que recurrir a librerías que generen dependencias en tu código? Pues bien, en este artículo vamos a ver de forma sencilla cómo trabajar con fechas en JavaScript.
Lo primero que hemos de decir es que las fechas son objetos de tipo Date. Las fechas se miden en milisegundos a partir del 1 de enero de 1970 a las 00:00:00. Eso significa que aunque nosotros representemos para que un humano pueda entenderla una fecha como 08/07/2004, realmente lo que estamos haciendo es: calcular los milisegundos que han pasado desde el 01/01/1970 hasta el 08/07/2004 y formatearlo en un formato de dd/mm/yyyy para que cualquiera que vea la fecha pueda entenderla y comprender a qué fecha nos referimos.
¿Qué encontrarás aquí?
Truco para trabajar con fechas de forma sencilla
A mí me sirve mucho para ver qué sale de un método, qué parámetros acepta etc. de forma muy visual y sencilla programar en el Chrome Developer Tools (o el equivalente de tu navegador web favorito). Para acceder, puedes hacer click con el botón derecho de tu ratón sobre una página web, darle a inspeccionar e irte a la consola o bien pulsando F12 y luego yéndote a la consola.
En esa consola del navegador puedes programar y cuando quieres ver algo rápido de forma visual (hay veces que igual la documentación no es todo lo clara que te gustaría, o quieres ver con un ejemplo que sale de x método etc.), pones el método, le das a intro y listo. Ya tienes el resultado (o el error). Fácil, sencillo y para toda la familia.
Métodos para trabajar con fechas en JavaScript
Cómo crear una fecha en JavaScript
Para ello usaremos el siguiente código nombreVariable=new Date(). Esto nos dará como resultado Mon Oct 04 2021 15:30:33 GMT+0200 (hora de verano de Europa central).
Al ser objetos, las fechas siempre se crean como objetos. Si la quiero pasar a string utilizaré el método toString(). Por ejemplo, nombreVariable.toString() daría como resultado 'Mon Oct 04 2021 15:30:33 GMT+0200 (hora de verano de Europa central)'.
Si sólo quisiera la hora, minutos y segundos sin la fecha en formato string, utilizaría el método toTimeString(). En este caso, nombreVariable.toTimeString() daría como resultado '15:30:33 GMT+0200 (hora de verano de Europa central)'.
Cómo pasar de milisegundos a fecha en JavaScript
Imagina que tienes los milisegundos de una determinada fecha pero quieres saber qué fecha es. ¿Cómo lo calculas? Pues de la siguiente forma: nuevaVariable=new Date (milisegundos). Por ejemplo, d=new Date(1633366025514); me dará el siguiente resultado Mon Oct 04 2021 18:47:05 GMT+0200 (hora de verano de Europa central).
Cómo pasar de fecha a milisegundos en JavaScript
En este caso tenemos una fecha en formato string y queremos saber su correspondencia en milisegundos. Para ello, usaremos Date.parse(). Por ejemplo, c=Date.parse('07/07/1999') mostrará para c el valor de 931298400000. También se puede utilizar en este caso el método Date.UTC(), sólo que en Date.UTC() los parámetros son números enteros en vez de strings.
Cómo pasar de fecha a milisegundos en JavaScript con mayor precisión
Como en el caso anterior, tenemos una fecha en formato string pero de esa fecha sabemos hasta los milisegundos. Es decir, la fecha que tengo en formato string es el 08/10/1999 05:20:20:10. Y quiero saber cuántos milisegundos han pasado hasta ese momento en concreto. Para ello, usaré Date.UTC(). Para ese ejemplo, el código sería d=Date.UTC (1999, 10, 8, 05, 20, 20, 10); y el resultado 942038420010.
¿Cómo saber los milisegundos de la fecha actual en JavaScript?
Pues para ello, simplemente has de ejecutar nombreVariable=Date.now(). Esto te devolverá un número entero con los milisegundos que han pasado desde el 1 de enero de 1970 hasta la actualidad. Por ejemplo, nombreVariable=Date.now() me devuelve como resultado 1633366025514.
Otro método que puedo emplear para hacer esto mismo es getTime(). Por ejemplo,
nombreVariable=new Date();
nombreVariable.getTime();
El valor de nombreVariable será de 1633366312074.
Si quiero modificar los milisegundos de una fecha transcurridos desde 1970, simplemente he de usar el método setTime(). Por ejemplo, nombreVariable.setTime(942038420010).
¿Cómo saber el año de la fecha actual en JavaScript?
Para ello, siendo hoy día lunes 04/10/2021, hemos de usar el método getFullYear(). Por ejemplo,
nombreVariable=new Date();
nombreVariable.getFullYear();
El valor de nombreVariable será de 2021, el a´ño en el que estamos cuando estoy escribiendo este artículo.
¿Cómo saber el mes de la fecha actual en JavaScript?
Para ello, siendo hoy día lunes 04/10/2021, hemos de usar el método getMonth(). Por ejemplo,
nombreVariable=new Date();
nombreVariable.getMonth();
El valor de nombreVariable será de 9. ¿Por qué 9 y no 10, si estamos en octubre? Simplemente porque en JavaScript los meses van de 0 a 11, siendo 0 enero y 11 diciembre.
¿Cómo saber el día del mes de la fecha actual en JavaScript?
Hoy es el día 04/10/2021. Para obtener ese día, el día del mes en el que estamos, simplemente he de usar el método getDate(). Por ejemplo,
nombreVariable=new Date();
nombreVariable.getDate();
El valor de ese nombreVariable será de 4, que es el día de hoy.
¿Cómo saber el día de la semana de la fecha actual en JavaScript?
Para ello, siendo hoy día lunes 04/10/2021, hemos de usar el método getDay(). Por ejemplo,
nombreVariable=new Date();
nombreVariable.getDay();
El resultado será 1. Esto es algo importante de aclarar: JavaScript entiende los días de la semana de 0 a 6, empezando la semana en 0 domingo y acabando en 6 sábado.
¿Cómo saber la hora de la fecha actual en JavaScript?
Para ello, siendo hoy día lunes 04/10/2021 a las 18.30, hemos de usar el método getHours(). Por ejemplo,
nombreVariable=new Date();
nombreVariable.getHours();
El valor de nombreVariable será de 18, la hora de la fecha actual.
¿Cómo saber los minutos de la fecha actual en JavaScript?
Para ello, siendo hoy día lunes 04/10/2021 a las 18.30, hemos de usar el método getMinutes(). Por ejemplo,
nombreVariable=new Date();
nombreVariable.getMinutes();
El valor de nombreVariable será de 30, los minutos de la fecha actual.
¿Cómo saber los segundos de la fecha actual en JavaScript?
Para ello, siendo hoy día lunes 04/10/2021 a las 18:35:27, hemos de usar el método getSeconds(). Por ejemplo,
nombreVariable=new Date();
nombreVariable.getSeconds();
El valor de nombreVariable será de 27, los segundos de la fecha actual.
¿Cómo saber los ms de la fecha actual en JavaScript?
Este dato es muy raro que lo utilices, pero si quisieras saberlo, simplemente has de utilizar el método getMilliseconds(). Por ejemplo,
nombreVariable=new Date();
nombreVariable.getMilliseconds();
El valor de nombreVariable será de 354, los milisegundos de la fecha actual. Cuidado: no los milisegundos desde 1970, no nos confundamos con otros métodos, si no los milisegundos transcurridos dentro del segundo en el que he ejecutado el método (por tanto, su valor estará entre 0 y 999, ya que un segundo tiene 1000 milisegundos).
¿Cómo puedo modificar el año de una fecha con JavaScript?
Estamos a 04/10/2021. Pongamos que quiero modificar el a´ño en mi programa y que la fecha que aparezca sea 1980. Esto se hace con el método setFullYear().
Primero, creamos una variable que va a tener la fecha actual.
nombreVariable=new Date(); //Mon Oct 04 2021 19:05:30 GMT+0200 (hora de verano de Europa central)
Luego cambio el a´ño, usando el método setFullYear():
nombreVariable.setFullYear(1980); //Me devuelve ms 339530730034
Y, luego, uso el método getFullYear() para comprobar que efectivamente se ha cambiado:
nombreVariable.getFullYear(); //Me devuelve 1980, todo correcto
¿Cómo puedo modificar el mes de una fecha con JavaScript?
Hoy es 04/10/2021. Pero en mi programa quiero cambiar el mes y que aparezca, por ejemplo, el día 04/05/2021. Una forma sencilla de hacer esto es con el método setMonth().
Primero, creamos una variable que va a tener la fecha actual.
nombreVariable=new Date(); //Mon Oct 04 2021 19:28:42 GMT+0200 (hora de verano de Europa central)
Luego cambio el mes, usando el método setMonth():
nombreVariable.setMonth(04); //Me devuelve ms 1620149322300
Y, luego, uso el método getMonth() para comprobar que efectivamente se ha cambiado:
nombreVariable.getMonth(); //Me devuelve 4, todo correcto
Todo correcto porque recordemos que en JavaScript los meses van de 0 a 11, siendo 0 enero y 11 diciembre. Por tanto, le he puesto 4 porque el 4 corresponde a mayo. Una forma sencilla de no liarse es que en JavaScript los meses es el número que todos conocemos menos 1. Por ejemplo, Octubre es el mes 10, 10-1=9, por tanto Octubre en JavaScript se conoce como el mes 9.
¿Cómo puedo modificar el día del mes de una fecha con JavaScript?
Hoy es 04/10/2021. Pero en mi programa quiero cambiar el día del mes y que aparezca, por ejemplo, el día 01/10/2021. Una forma sencilla de hacer esto es con el método setDate().
Primero, creamos una variable que va a tener la fecha actual.
nombreVariable=new Date(); //Mon Oct 04 2021 18:56:56 GMT+0200 (hora de verano de Europa central)
Luego cambio el día del mes, usando el método setDate():
nombreVariable.setDate(01); //Me devuelve ms 1633107416914
Y, luego, uso el método getDate() para comprobar que efectivamente se ha cambiado:
nombreVariable.getDate(); //Me devuelve 1, todo correcto
¿Cómo puedo modificar la hora del día de una fecha con JavaScript?
Hoy es 04/10/2021 y son las 19:13. Pero en mi programa quiero cambiar la hora del día y que aparezca, por ejemplo, como horas las 14 de la tarde. Una forma sencilla de hacer esto es con el método setHours().
Primero, creamos una variable que va a tener la fecha actual.
nombreVariable=new Date(); //Mon Oct 04 2021 19:13:04 GMT+0200 (hora de verano de Europa central)
Luego cambio la hora del día, usando el método setHours():
nombreVariable.setHours(14); //Me devuelve ms 1633349584756
Y, luego, uso el método getHours() para comprobar que efectivamente se ha cambiado:
nombreVariable.getHours(); //Me devuelve 14, todo correcto
¿Cómo puedo modificar los minutos de una hora del día de una fecha con JavaScript?
Hoy es 04/10/2021 y son las 19:25. Pero en mi programa quiero cambiar los minutos de la hora del día y que aparezca, por ejemplo, como minutos que son las 19:05 de la tarde, es decir, sólo cinco minutos en el minutero. Una forma sencilla de hacer esto es con el método setMinutes().
Primero, creamos una variable que va a tener la fecha actual.
nombreVariable=new Date(); //Mon Oct 04 2021 19:25:58 GMT+0200 (hora de verano de Europa central)
Luego cambio los minutos de la hora, usando el método setMinutes():
nombreVariable.setMinutes(05); //Me devuelve ms 1633367158612
Y, luego, uso el método getHours() para comprobar que efectivamente se ha cambiado:
nombreVariable.getMinutes(); //Me devuelve 5, todo correcto
¿Cómo puedo modificar los segundos de una hora del día de una fecha con JavaScript?
Hoy es 04/10/2021 y son las 19:36:54. Pero en mi programa quiero cambiar los segundos de la hora del día y que aparezca, por ejemplo, como segundos que son las 19:36:02 de la tarde, es decir, sólo dos segundos en el segundero. Una forma sencilla de hacer esto es con el método setSeconds().
Primero, creamos una variable que va a tener la fecha actual.
nombreVariable=new Date(); Mon Oct 04 2021 19:36:54 GMT+0200 (hora de verano de Europa central)
Luego cambio los segundos del minuto, usando el método setSeconds():
nombreVariable.setSeconds(02); //Me devuelve ms 1633368962229
Y, luego, uso el método getSeconds() para comprobar que efectivamente se ha cambiado:
nombreVariable.getSeconds(); //Me devuelve 2, todo correcto
¿Cómo puedo modificar los milisegundos de un segundo de una fecha con JavaScript?
Hoy es 04/10/2021 y son las 19:13. Como puedes ver, al crear la fecha no me devuelve los milisegundos, pero eso es algo que podemos conseguir de forma fácil si quisiéramos con el método getMilliseconds(). En cualquier caso, yo aquí lo que quiero es, por alguna razón (yo no he usado este método en mi vida) modificar los milisegundos de una determinada fecha. Pues fácil, con el método setMilliseconds();.
Primero, creamos una variable que va a tener la fecha actual.
nombreVariable=new Date(); //Mon Oct 04 2021 19:13:04 GMT+0200 (hora de verano de Europa central)
Luego cambio los milisegundos de un segundo, usando el método setMilliseconds(). Recordemos que el rango de los milisegundos que puedo indicar va de 0 a 999:
nombreVariable.setMilliseconds(300); //Me devuelve ms 1633349584300
Y, luego, uso el método getMilliseconds() para comprobar que efectivamente se ha cambiado:
nombreVariable.getMilliseconds(); //Me devuelve 300, todo correcto
Obteniendo la fecha en formato inglés con JavaScript
Primero, creamos una variable que va a tener la fecha actual.
nombreVariable=new Date(); //Mon Oct 04 2021 19:44:39 GMT+0200 (hora de verano de Europa central)
Y luego usamos el método toDateString();:
nombreVariable.toDateString(); // 'Mon Oct 04 2021'
Y ya estaría. Fácil, sencillo y para toda la familia.
Obteniendo la fecha en formato local con JavaScript
Primero, creamos una variable que va a tener la fecha actual.
nombreVariable=new Date(); //Mon Oct 04 2021 19:49:03 GMT+0200 (hora de verano de Europa central)
Y luego usamos el método toLocaleDateString();:
nombreVariable.toLocaleDateString(); // '4/10/2021'
Con formato local nos referimos al formato estándar en tu país. En mi caso, España, sería este.
Obteniendo la fecha en formato local con JavaScript con más especificidad
Primero, creamos una variable que va a tener la fecha actual.
nombreVariable=new Date(); //Mon Oct 04 2021 22:29:18 GMT+0200 (hora de verano de Europa central)
Quiero tener el formato estándar de Corea del Sur, incluido horas, minutos y segundos (y cualquier carácter de texto que pueda ser estándar en dicho país). Y luego usamos el método toLocaleString('ko-kr'); con el parámetro 'ko-kr' indicando la convención de fecha que quiero. He aquí el resultado:
nombreVariable.toLocaleString(); // '2021. 10. 4. 오후 10:29:18'
Obteniendo la hora, minutos y segundos en formato local con JavaScript
Pues eso. En este caso sólo quiero horas, minutos y segundos de la fecha actual, indicando yo el formato estándar que quiero que tenga esta información horaria. En este caso, como antes, quiero el formato estándar de Corea del Sur. Primero, creo la variable:
nombreVariable=new Date(); //Mon Oct 04 2021 22:35:22 GMT+0200 (hora de verano de Europa central)
Y luego utilizo el método toLocaleTimeString(), aplicando el parámetro correspondiente a la convención que quiero para la información horaria. En este caso:
nombreVariable.toLocaleTimeString(); // ''오후 10:35:22''
Conclusiones
Espero que esta guía sobre cómo trabajar con fechas en JavaScript sin librería alguna te haya resultado interesante y útil. Me gustaría dejarte además mi GitHub dónde tengo varias funciones de JavaScript relacionadas con fechas (validar una fecha de nacimiento, validar si un año es bisiesto, si alguien es mayor de edad etc.) que me fueron muy útiles en 2º de Desarrollo de Aplicaciones Web (DAW), por si te pudieran servir.
Por otro lado, mencionar que aunque no están el 100% de los métodos con los que puedes trabajar con fechas en JavaScript en este artículo, están la gran mayoría, los más útiles y más usados. Si necesitas utilizar alguno que no encuentras aquí, te recomiendo acudir a la documentación.
Además, me gustaría comentarte que si quieres practicar para consolidar tus conocimientos sobre cómo trabajar con fechas con JavaScript, aquí te dejo un artículo que cambiará tu forma de hacer proyectos personales, hará que nunca te quedes sin ideas de cómo hacer este tipo de proyectos, te permitirá hacer proyectos que mejoren aún más tu portfolio y, además, te dejo 10 ideas de proyecto. Espero que te sea de utilidad.
Recuerda que puedes contactar con nosotros por Twitter, Instagram o por nuestro formulario. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios. Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en el siguiente artículo.