Cómo obtener la fecha actual en JavaScript: análisis completo para principiantes

Cómo obtener la fecha actual en JavaScript: analizamos una pregunta popular de Stack Overflow

Si estás comenzando tu camino en el desarrollo web, tarde o temprano te enfrentarás a la tarea: mostrar la fecha actual en una página. Parece sencillo, ¿verdad? Pero, como muestran las estadísticas de Stack Overflow, la pregunta "How do I get the current date in JavaScript?" acumula miles de visitas cada mes. ¿Por qué? Porque detrás de una formulación simple se esconde toda una capa de matices: desde formatos de salida hasta el trabajo con husos horarios.

En este artículo no solo daremos el código listo. Lo analizaremos en detalle, aprenderemos a gestionar los formatos y evitaremos los errores típicos que cometen los principiantes. ¡Allá vamos!

Conoce al objeto Date: tu herramienta principal

En JavaScript no existe un comando especial "muestra hoy". En su lugar, el lenguaje ofrece un objeto Date potente, aunque a veces engañoso. Para obtener el momento actual, basta con crear una nueva instancia sin argumentos:

const now = new Date();console.log(now); // Salida: Tue Oct 15 2024 14:30:00 GMT+0300

¡Así de simple! Pero veamos qué hemos obtenido realmente. En la consola verás algo como Tue Oct 15 2024 14:30:00 GMT+0300. Este es un formato legible para humanos, pero no siempre es adecuado para tareas reales. Imagina que estás creando una tienda en línea y quieres mostrar la fecha del pedido como "15.10.2024" — esa salida "nativa" no sirve.

El problema es que el objeto Date almacena los milisegundos transcurridos desde el 1 de enero de 1970 (época Unix). Y lo que vemos en la consola es el resultado de una conversión implícita a cadena. Para tener control sobre el formato, necesitamos usar los métodos del objeto.

Métodos para extraer componentes de la fecha

Imagina que la fecha es una pizza que hay que cortar en trozos: año, mes, día, horas, minutos, segundos. El objeto Date tiene "cuchillos" especiales: métodos para cada trozo.

Aquí están los más populares:

• getFullYear() — devuelve el año (por ejemplo, 2024).
• getMonth() — devuelve el mes de 0 a 11. Atención: enero es 0, diciembre es 11. ¡Esta es una trampa común!
• getDate() — devuelve el día del mes (1-31).
• getDay() — devuelve el día de la semana de 0 (domingo) a 6 (sábado).
• getHours(), getMinutes(), getSeconds() — obviamente, horas, minutos, segundos.

Construyamos nuestra propia fecha con ellos:

const now = new Date();const year = now.getFullYear();const month = now.getMonth() + 1; // +1 porque enero = 0const day = now.getDate();const hours = now.getHours();const minutes = now.getMinutes();

console.log(`${day}.${month}.${year} ${hours}:${minutes}`);// Salida: "15.10.2024 14:30"

Observa: sumamos +1 al mes. Este es el error clásico de principiante: olvidar la numeración desde cero. Recuerda de una vez por todas: getMonth() devuelve 0 para enero.

Salida bonita: formateo de fecha

Construir la cadena manualmente está bien para entender, pero hay formas más elegantes. JavaScript ofrece varios métodos integrados para formatear:

1. toLocaleDateString() — para salida localizada

Este método se adapta a la configuración regional. ¿Quieres en español? Por favor:

const now = new Date();console.log(now.toLocaleDateString('es-ES')); // "15/10/2024"console.log(now.toLocaleDateString('en-US')); // "10/15/2024"console.log(now.toLocaleDateString('de-DE')); // "15.10.2024"

Incluso puedes personalizar el formato según tus necesidades, pasando un objeto con opciones:

const options = {  year: 'numeric',  month: 'long',  day: 'numeric',  weekday: 'long'};console.log(now.toLocaleDate