Usando Date de manera básica en Javascript / Typescript
Consejos y pautas para trabajar en la clase Date que nos será útil en todos nuestros proyectos donde trabajamos con fechas
En este artículo os voy a hablar de lo básico que hay que saber para trabajar con la clase Date y sus funciones principales.
Esto lo usamos como fuente de información que algo común en prácticamente todos los proyectos, ya que se utiliza para almacenar fechas de registros de usuarios, fechas de operaciones como puede ser el pago de un pedido online y muchos caso más.
Si queréis más información sobre esta clase con sus características, sus propiedades y más información, podéis hacerlo en el siguiente enlace:
Esto será una serie de artículos, en el que empezaremos con este artículo y tendremos el siguiente contenido:
- Usando Date de manera básica en Javascript / Typescript (Este artículo, seguimos leyendo)
- Trabajando con los formatos de fecha de la clase Date en Javascript / Typescript
- Métodos Get con la clase Date en Javascript / Typescript- Obtener información.
- Métodos Set con la clase Date en Javascript / Typescript- Asignar información
1.- ¿Qué es la clase Date?
La clase Date dentro de Javascript / Typescript es una clase que nos permite trabajar con fechas y horas en diferentes variantes.
Tendremos muchas opciones:
- Fechas y horas completo.
- Fechas sin horas.
- …
A continuación haré una pequeña introducción, para que sepamos cómo inicializar la clase Date con las diferentes variantes y luego ya nos centramos en los métodos que más utilizaremos de manera básica.
2.- Zonas horarias
Hay cientos de zonas horarias en el mundo. En JavaScript, solo nos van a interesar dos: la hora local y la hora universal coordinada (UTC).
La hora local se refiere a la zona horaria en la que se encuentra nuestro dispositivo que podría ser una Tablet, ordenador, portátil,…
Clasificamos de la siguiente manera:
- UTC = Greenwich Mean Time (GMT).
- De forma predeterminada, casi todos los métodos de fecha en JavaScript (excepto uno) le dan una fecha / hora en la hora local. Solo obtiene UTC si especifica UTC.
Con esto, podemos empezar a hablar sobre el crear fechas.
3.- Empezando a trabajar con la clase Date
Para inicializar la clase Date, debemos de hacer uso del constructor
new Date()
new Date(milisegundos)
new Date(cadenaFecha)
new Date(año, mes, dia, horas, minutos, segundos, milisegundos)
3.1.- new Date()
Si no se proporcionan argumentos, el constructor crea un objeto Date con la hora y fecha de del momento actual según la hora local.
const date = new Date();
Por defecto, JavaScript usará la zona horaria del navegador y mostrará una fecha como una cadena de texto completo:
Thu Jul 08 2021 15:09:45 GMT+0200 (hora de verano de Europa central)
En mi caso, como mi huso horario corresponde al horario de verano de Europa Central, la fecha y hora se corresponde +2 sobre la fecha en UTC.
3.2.- new Date(milisegundos)
new Date(milisegundos) crea un nuevo objeto de fecha como tiempo cero más milisegundos
Este valor valor entero que representa el número de milisegundos desde las 00:00:00 UTC del 1 de enero de 1970.
Si ponemos el número en negativo, serán fechas anteriores a la que representa en este apartado.
Ejemplos con diferentes opciones y explicados en el código:
3.3.- newDate(cadenaFecha)
new Date(dateString) crea un nuevo objeto de fecha a partir de un string de fecha. Un ejemplo podría ser lo siguiente:
const date = new Date(CadenaDeTextoConVariante)
Donde en “CadenaDeTextoConVariante” asignaremos cualquiera de las variantes descritas con la fecha / hora establecida.
Existen estas variantes que a continuación se muestran y que son las más habituales:
Siguiendo las variantes, podemos crear ejemplos de diferentes maneras pasando el valor de fecha / hora como string especificando los datos necesarios.
Aquí os muestro varios ejemplos para que podamos ver diferentes variantes:
// Mon Mar 21 1988 00:00:00 GMT+0100 (hora estándar de Europa central)
new Date('1988-02-21')// Mon Mar 21 1988 00:00:00 GMT+0100 (hora estándar de Europa central)
new Date('21-02-88')// Mon Mar 21 1988 00:00:00 GMT+0100 (hora estándar de Europa central)
new Date('21-02-1988')// Wed Dec 25 2019 08:00:00 GMT+0100 (hora estándar de Europa central).
new Date('1988-02-21 08:00:00')// Mon Nov 06 2023 02:20:00 GMT+0100 (hora estándar de Europa central)
new Date('2023-10-06 02:20:00')// Tue Jun 11 2019 05:23:59 GMT+0200 (hora de verano de Europa central)
new Date('2023-06-11 05:23:59')
Para asignar otras variantes con los patrones de formato de fechas podemos usar esta referencia con cada elemento, solo queda ir experimentando (cosa vuestra):
Si creamos la fecha especificando uno de los formatos mencionados, se establecerá directamente la hora local de nuestra ubicación respecto a la zona de las Coordenadas de Tiempo Universal conocido como UTC.
Lo ideal cuando vamos a trabajar con un proyecto que es a nivel mundial, es almacenar las fechas teniendo como referencia la zona UTC, para que luego cuando la usemos podamos cargar correctamente con el huso horario en el que nos encontremos y así no tener que estar reinventando la rueda con cosas raras.
3.4.- new Date(año, mes, dia, horas, minutos, segundos, milisegundos)
new Date(año, mes,...) Crea un objeto de fecha con una fecha y hora específicas.
Se añadirán 7 números como argumentos respetando el orden, que son los siguientes:
añoUn año mayor de 1900.mesUn entero entre 0 y 11 que representa al mes. Por defecto, 0 = EnerodiaUn entero entre 1 y 31 que representa al día del mes. Por defecto, 1.horaUn entero entre 0 y 23 que representa la hora. Por defecto, 0.minutosUn entero entre 0 y 59 que representa los minutos. Por defecto, 0segundosUn entero entre 0 y 59 que representa los segundos. Por defecto, 0milisegundosUn entero entre 0 y 999 que representa los milisegundos. Por defecto, 0
Debe de respetar ese orden siempre. Podemos poner únicamente usando el primer y segundo argumento, que será los que especifiquemos el año y el mes.
Los demás valores serán los valores por defecto del valor que representa la fecha desde las 00:00:00 UTC del 1 de enero de 1970.
Ejemplo con los 6 primeros argumentos (sin añadir el 7º que es 0 por defecto):
// Tue Jun 11 2019 05:23:59 GMT+0200 (hora de verano de Europa central), Fecha y hora locales
new Date(2019, 5, 11, 5, 23, 59)Muchos desarrolladores (incluido yo mismo) evitan el enfoque de los argumentos porque parece complicado.
Aunque en realidad es bastante simple.
Vamos a intentar leer números de izquierda a derecha. A medida que avanza de izquierda a derecha, inserta valores en magnitud decreciente: año, mes, día, horas, minutos, segundos y milisegundos.
new Date(2017, 3, 22, 5, 23, 50)// Esta fecha es muy sencilla de leer siguiendo la formula de izquierda a derecha teniendo en cuenta lo siguiente como referencia
// Año: 2017,
// Mes: Abril(empieza desde índice 0 y al ser el 4º => 3)
// Día del mes: 22
// Horas: 05
// Minutos: 23
// Segundos: 50
La parte más problemática de la fecha es que el valor del mes está indexado a cero, como en Enero === 0, Febrero === 0, Marzo === 0 y así sucesivamente.
Es algo que tenemos que interiorizar si o si, que cuando trabajamos con fechas, concretamente con los meses en Javascript / Typescript, que tenemos que tener en cuenta que los meses son desde el 0 al 11. Cuando tengamos esto claro, todo va a ser muchísimo más fácil y ya le perderemos el miedo a trabajar con fechas haciendo uso de los argumentos.
Aquí os muestro otras variantes con algunos ejemplos más para que nos familiaricemos con ello en las que el resultado SIEMPRE será en la hora local de donde nos encontremos, en mi caso estoy en España y tengo asignada la de Europa Central:
// Mon Mar 21 1988 00:00:00 GMT+0100 (hora estándar de Europa central)
new Date(1988, 2, 21)// Wed Dec 25 2019 08:00:00 GMT+0100 (hora estándar de Europa central).
new Date(2019, 11, 25, 8)// Mon Nov 06 2023 02:20:00 GMT+0100 (hora estándar de Europa central)
new Date(2023, 10, 6, 2, 20)// Tue Jun 11 2019 05:23:59 GMT+0200 (hora de verano de Europa central)
new Date(2019, 5, 11, 5, 23, 59)
Como os he mencionado, antes de mostrar los últimos ejemplos, ya os he advertido que el resultado iban a ser en horas locales.
Esto está bien si nuestro proyecto es para una ubicación concreta que tiene un huso horario, con lo que en ese sentido, si almacenamos esa fecha en la base de datos, no pasaría nada.
Eso sí, como nunca se sabe si un proyecto puede crecer y expandirse, yo os recomiendo siempre almacenar las fechas en UTC, para así tener el control de seleccionar esa fecha, cogerla y añadirla en el constructor. Con eso basándose en esa fecha, se cargará la hora local dependiendo de nuestra zona horaria.
Esta es una de las ventajas de usar argumentos, no nos confundiremos entre la hora local y la UTC.
4.- Trabajando con fechas en UTC
Si alguna vez necesitamos UTC, creamos una fecha en UTC de esta manera:
// Tue Jun 11 2019 07:23:59 GMT+0200 (hora de verano de Europa central)
new Date(Date.UTC(2019, 5, 11, 5, 23, 59))Os explico las dos partes de la fecha:
- Date.UTC(2019, 5, 11, 5, 23, 59): El resultado de esto será la fecha del 11 de junio (por ser el mes 5, recordad que empieza en 0) de 2019, a las 05:23:59 de la mañana (en UTC) y se da en milisegundos, desde la fecha del 1 de enero de 1970 a las 00:00:00.
- new Date(<lo anterior>): Fecha local que se asigna dependiendo NUESTRA HORA LOCAL. En mi caso, ahora con el horario de verano es +2 horas, por lo que al pasar como argumento esa fecha en UTC, la hora se convierte en 07:23:59.
Si queremos guardar la fecha en UTC de manera que cuando cojamos como argumento lo tengamos para usarlo en nuestra hora local, tenemos dos opciones:
- Guardar el valor de la fecha en milisegundos (lo obtenido de Date.UTC).
- Convertir la fecha local en un string con la hora UTC mediante la función
Esto es útil a la hora de completar registros de usuarios, marcar cuando hemos comprado un producto y más.
5.- Conclusión
Con esto terminamos esta primera parte trabajando con las fechas, ya tenemos los conocimientos básicos y atentos a las próximas entregas.
6- Invitame a un café
Si este contenido o cualquier artículo de los que puedes encontrar aquí te resulta útil, si queréis ir obteniendo artículos de calidad, me gustaría vuestro apoyo ya que sin ese apoyo no podré dedicarle el tiempo necesario a crear este contenido de calidad.
Podéis apoyarme desde aquí:
7- Presencia en redes sociales.
Podéis encontrarme en las siguientes redes.
