El objeto Format Date y el formato de fecha de JavaScript

Introducción

Imagina que te han contratado para crear una aplicación encargada de programar citas en una clínica médica. Has completado el desafío, pero te has encontrado con un pequeño problema: ¡las fechas en JavaScript están con los meses invertidos! ¿Y ahora, qué debes hacer? ¿Sentarte y llorar? No te preocupes, desarrollador. Lo primero que debemos hacer es entender por qué ocurre esto.

¿Cómo funciona el objeto principal de JavaScript encargado de este mecanismo?

¿Cómo instanciar una fecha en JavaScript?

El primer paso para instanciar una fecha en lenguaje JavaScript es utilizar el constructor Date. JavaScript tiene nativamente esta funcionalidad, por lo que podemos crear fechas utilizando el constructor Date. Los objetos Date creados a partir de este constructor representan un momento específico en el tiempo dentro del calendario occidental (fechas) y se basan en un valor en milisegundos (que es una unidad de tiempo equivalente a un milésimo de segundo, y puedes calcular segundos x 1000 para obtener el resultado en milisegundos).

El uso del constructor Date ofrece diversas opciones para crear instancias de fechas en JavaScript, que se pueden realizar de la siguiente manera:

const milisegundos = 100000000;

const dataString = "2001-05-28";

const anho = 2015;
const mes = 03 - 1;
const dia = 25;
const hora = 15;
const minuto = 00;
const segundo = 00;
const ms = 00;

new Date(); // Sin parámetros, devuelve la fecha y hora actual por el huso horario cero (Greenwich). -> "Thu Jul 13 2023 15:16:35 GMT-0300 (Horário Padrão de Brasília)"

new Date(milisegundos);  // Cuando se utiliza un único parámetro numérico, se muestra el número de milisegundos. JavaScript almacena las fechas en milisegundos desde enero de 1970. -> "Fri Jan 02 1970 00:46:40 GMT-0300 (Horário Padrão de Brasília)"

new Date(dataString); // Al proporcionar una fecha en formato de cadena (String), se puede crear una fecha utilizando la notación ISO. -> "Sun May 27 2001 21:00:00 GMT-0300 (Horário Padrão de Brasília)"

new Date(anho, mes, dia, hora, minuto, segundo, ms); // Al proporcionar todos los parámetros, se crea un objeto de fecha con una fecha y hora específicas. La fecha se devolverá en formato GMT, teniendo en cuenta la adición o sustracción de la diferencia de tiempo entre tu zona horaria y la zona horaria de Greenwich. -> "Wed Mar 25 2015 15:00:00 GMT-0300 (Horário Padrão de Brasília)"

Toma en cuenta que, dependiendo de tu huso horario, las horas pueden ser más cortas o más largas que las horas aplicadas por la función. En el caso de dataString, la fecha proporcionada al objeto Date fue el 28 de mayo de 2001. Sin embargo, debido al huso horario del sistema del usuario, el valor devuelto por la función se calculó con una disminución de 3 horas, que equivale a la diferencia entre la hora media de Greenwich (GMT) y la hora de Brasilia (GMT -3).

Ahora que sabemos cómo crear instancias de fechas en JavaScript, profundicemos un poco más en sus formatos

Date Formats: Formatos de fechas en JS

Al crear instancias de un objeto Date a través de un método de entrada, la salida puede tomar diferentes formas dependiendo de su elección. Por defecto, JavaScript genera fechas en un formato de texto, una String e independientemente del formato de entrada, la salida tendrá esta estructura:

Al crear instancias de un objeto Date utilizando un método de entrada, la salida puede tomar diferentes formas dependiendo de tu elección. Por defecto, JavaScript genera fechas en formato de texto, una String, y sin importar el formato de entrada, la salida seguirá esta estructura:

Mon Jan 31 2022 18:32:35 GMT-0300

Otro punto de atención es la ISO 8601, que es la norma internacional para la representación de horas y fechas. La sintaxis (YYYY-MM-DD) es también el formato de fecha más común.

Pero, ¿cómo funciona en la práctica?

Si se instancia una nueva fecha en este formato:

const dataIso = new Date("2015-03-25");
console.log(dataIso);

La salida en la consola del navegador será:

Tue Mar 24 2015 21:00:00 GMT-0300 (Horário Padrão de Brasília)

¡Todo correcto! Hemos podido crear nuestra fecha en su formato estándar, con texto en inglés y el huso horario GMT (Greenwich Mean Time), que representa de manera sencilla nuestras 24 horas del día. Sin embargo, debemos tener en cuenta que este no es el único formato de fecha, y es importante tener precaución al instanciar un objeto Date, ya que la fecha calculada puede variar según el huso horario predeterminado de tu navegador. En general, existen 3 tipos de formatos de fecha en JavaScript, los cuales veremos en la siguiente tabla.

JavaScript sigue las siguientes reglas de zona horaria de forma predeterminada:

• Al establecer una fecha sin especificar una zona horaria, JavaScript utilizará la zona horaria de tu navegador.
• Al capturar una fecha sin especificar la zona horaria, el resultado se convertirá a la zona horaria de tu navegador.

De esta manera, si un usuario navega desde el centro de los Estados Unidos, el navegador convertirá la fecha y la hora a CST (Central Standard Time, o hora estándar central de los Estados Unidos), incluso si la fecha se creó en GMT (Hora del meridiano de Greenwich

Formato de fecha undefined

Es posible que algunos navegadores no reconozcan un formato de fecha específico. El formato de fecha "YYYY/MM/DD", con barras inclinadas, puede generar un error o NaN (No es un número). Por lo tanto, siempre es recomendable especificar fechas en el formato "MM/DD/YYYY" para evitar posibles inconvenientes.

const shortFunciona = new Date ("02/24/2022"); // Forma correcta, evita errores

const shortNoFunciona = new Date("2022/02/24"); // Posibilidad de devolver error o NaN

Por otro lado, al trabajar específicamente con fechas en la norma ISO, el formato "MM-DD-YYYY" no está definido. Algunos navegadores intentarán interpretarlo, pero es común que devuelvan NaN o generen un error. Por lo tanto, al trabajar con fechas en formato ISO, es recomendable utilizar siempre el formato "YYYY-MM-DD". Veamos un ejemplo para comprobarlo:

const isoFunciona = new Date("2022-02-24"); // Forma correcta, evita errores

const isoNoFunciona = new Date("02-24-2022"); // Posibilidad de devolver error o NaN

Curiosidad

JavaScript sigue una convención en la que los números de mes comienzan en 0 (por lo tanto, diciembre es 11) y los números de día comienzan en uno. Esto puede resultar confuso, así que ten cuidado al manipular fechas. Los últimos cuatro argumentos (horas, minutos, segundos y milisegundos) son opcionales y se consideran cero cuando no se proporcionan. Las marcas de tiempo se almacenan como el número de milisegundos transcurridos desde el inicio de 1970 en la zona horaria UTC. Esta convención sigue la definida por el 'tiempo de Unix', que fue inventado en esa época. También es posible utilizar números negativos para representar tiempos anteriores a 1970. Fuente: Eloquent JavaScript. 3rd edition. Marijn Haverbeke, p.149.

Conclusión

Es fundamental formatear correctamente las fechas para evitar problemas en la aplicación y brindar una mejor experiencia al usuario. Además, en términos de Google SEO la search engine optimization (buscador optimizado), es más eficiente tener una lista de todas las URL relevantes con las fechas de última modificación del contenido principal. Imagina cómo sería si no hubiera una organización por fechas en tu sitio.

En este sentido, el buen uso de las fechas enriquecerá tu proyecto, y no hay nada mejor que comprender lo que sucede detrás de la herramienta para facilitar y optimizar el aprendizaje.

¿Quieres profundizarte en JavaScript? Descubre nuestros cursos y formaciones:

• Formación JavaScript para Front-End
• Formación Principiante en Programación
• Curso JavaScript: Introducción a la Orientación a Objetos
• Curso JavaScript: tipos, variables y funciones
• Algoritmos y Lógica de programación: ¿Qué son y cuál es la importancia?
• Trabajando con fechas en JavaScript
• Eloquent JavaScript

Camila Pessôa

¡Hola, soy Camila! Tengo 33 años, soy madre y me adentré en el área de la tecnología a través de la robótica educativa. Participé en el Bootcamp { Reprograma } con enfoque en Back-End /Node.js y actualmente estoy estudiando Sistemas de Información. Formo parte del equipo Scuba-Team y tengo una gran pasión por la educación y la tecnología, ya que creo que esta combinación tiene un poder transformador.

Este artículo fue traducido y adaptado para Alura Latam por Nathalia Cardozo