El objeto date en JavaScript – ¿Cómo obtener la hora y fecha?

El objeto Date en JavaScript es una herramienta fundamental para manipular fechas y horas. A través de su constructor, podemos crear instancias que representan un punto específico en el tiempo. Utilizando sus métodos, es posible tanto obtener la fecha y hora como modificarla o darle diferentes formatos para su visualización o almacenamiento.

1. ¿Qué es el objeto date?

El objeto Date es un objeto incorporado en JavaScript que se utiliza para trabajar con fechas y horas. Se utiliza para crear, obtener, modificar, comparar y formatear fechas y horas en múltiples formatos.

¿Qué significa que Date sea un objeto integrado en JavaScript?

Queremos decir que: Forma parte del lenguaje JavaScript por defecto, sin que tengas que instalar, importar o definir nada adicional.

¿Qué implica eso en la práctica?

✅ Podés usar Date directamente, en cualquier archivo .js o entorno que entienda JavaScript (navegador, Node.js, etc.).

✅ Está disponible de forma global: podés escribir new Date() sin hacer import ni definirlo antes.

✅ Fue diseñado por los creadores del lenguaje, y tiene métodos ya preparados para tareas comunes relacionadas con fechas y horas (que iremos viendo mas adelante).

1.1. ¿Para qué sirve en el objeto date?

Algunos usos comunes del objeto Date incluyen:

• Mostrar la fecha y hora actual en una página web.
• Medir el tiempo transcurrido entre dos eventos.
• Programar recordatorios, calendarios, alarmas.
• Calcular diferencias de tiempo entre fechas (como edad, días faltantes, etc.).
• Mostrar fechas con formato local o internacional.
• Estampar un registro con la fecha de creación o modificación.

1.2. Ejemplo: Obtener la fecha y hora actual

const ahora = new Date();
console.log(ahora);Lenguaje del código: JavaScript (javascript)

Explicación:

• Usamos una variable JS para guardar y luego usar el objeto dateen nuestro programa.
• new Date() crea una nueva instancia del objeto Date con la fecha y hora actual del sistema.
• console.log(ahora) muestra algo como:
  Tue Jul 30 2025 19:20:45 GMT-0300 (Argentina Standard Time).

¿Entonces solamente al usar new date(); en mi código, ya puedo mostrar la hora actual automáticamente en mi programa?

Exacto! Con solo escribir new Date(); en tu código, ya estás generando automáticamente un objeto con la fecha y hora actual del sistema. Ese objeto incluye año, mes, día, hora, minutos, segundos y milisegundos.

¿Y si quiero mostrar una hora u formato diferente?

Para mostrar la hora en un formato diferente en JavaScript, siempre empezás creando una instancia del objeto Date (con new Date()), y luego aplicás uno de estos métodos o estrategias de formato:

• toLocaleTimeString() con opciones:
  Permite personalizar el formato (24h o AM/PM, incluir o no segundos, etc.) según el idioma o región.
• Formato manual:
  Usando .getHours(), .getMinutes(), .getSeconds() y combinándolos con tus propios separadores.
• Formato AM/PM personalizado:
  Lógica para convertir la hora al formato de 12h con sufijo AM o PM.
• toLocaleString() con configuración:
  Para mostrar fecha y hora juntas en un solo string, también configurable.
• Librerías externas (date-fns, Luxon):
  Útiles para formatos complejos, zonas horarias y aplicaciones internacionales.

En los siguiente puntos iremos ampliando sobre el uso de ellos!

2. Ejemplo real usando el objeto date con JavaScript.

Supongamos que queremos visualizar la hora hora actual, en formato de 24hs. Para ello usaremos estos elementos especificamente:

(function () {
    function actualizarHoraGutenberg() {
      const ahora = new Date();
      const horaFormateada = ahora.toLocaleTimeString('es-AR', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });

      const contenedor = document.querySelector('#reloj-hora-gutenberg .texto-reloj-gutenberg');
      if (contenedor) contenedor.textContent = horaFormateada;
    }

    // Ejecuta al cargar
    actualizarHoraGutenberg();

    // Actualiza cada segundo
    setInterval(actualizarHoraGutenberg, 1000);Lenguaje del código: JavaScript (javascript)

¿Qué tener en cuenta dentro de este código?

• new Date(): Obtiene la fecha y hora actual del sistema del usuario.
• toLocaleTimeString(): Convierte la hora a una cadena legible, formateada según la configuración regional (en este caso, español de Argentina), mostrando horas, minutos y segundos en formato 24 horas.

Ahora veámoslo en tiempo real:

Para visualizarlo en tiempo real, usamos el código de arriba conjuntamente con los HTML necesarios y algunos estilos CSS, para hacerlo visualmente mas atractivo.

4. ¿Cómo crear fechas usando el objeto date?

Para crear fechas y horas, debemos generar un objeto Date nuevo y utilizable en tu código. Para ello, siempre usamos el constructor new Date().

El constructor Date() es muy versátil, y la forma en que lo llamas (es decir, los argumentos que le pasas) determina qué momento en el tiempo representará la nueva instancia de Date.

Aquí te presento las formas principales de crear una instancia de Date, cada una con sus explicaciones detalladas:

4.1. new Date(): La fecha y hora actuales

Esta es la forma más sencilla. Cuando llamas a new Date() sin ningún argumento, JavaScript crea una instancia de Date que representa el momento exacto en que se ejecuta esa línea de código, en la zona horaria local de tu sistema.

const momentoActual = new Date();

console.log(momentoActual);Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN: La variable 'momentoActual' contendrá un objeto Date que representa la fecha, hora, minutos, segundos y milisegundos en el instante preciso de la ejecución. Por ejemplo: ‘Wed Jul 30 2025 21:45:30 GMT-0300 (Argentina Standard Time)’ (La salida exacta variará según tu momento y ubicación actuales).

4.2. new Date(milliseconds): Desde la época unix

Esta forma te permite crear una fecha a partir de un número de milisegundos transcurridos desde la Época Unix. La Época Unix es el 1 de enero de 1970 a las 00:00:00 UTC (Coordinated Universal Time). Es el punto de referencia universal para las fechas en muchos sistemas informáticos, incluido JavaScript.

Si el número de milisegundos es positivo, la fecha será posterior a 1970. Si es negativo, será anterior.

// EJEMPLO 1: Una fecha posterior a la Época Unix

const milisegundosDesde1970 = 1672531200000; // Esto equivale al 1 de enero de 2023, 00:00:00 UTC
const fechaFutura = new Date(milisegundosDesde1970);

console.log(fechaFutura);Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN: JavaScript toma este número de milisegundos desde la Época Unix UTC, y lo convierte a la fecha y hora correspondiente en tu zona horaria local. Si estás en Argentina (-3 horas de UTC), verías: ‘Sat Dec 31 2022 21:00:00 GMT-0300 (Argentina Standard Time)’ Es crucial entender que el input es UTC, pero la representación por defecto es local.

// EJEMPLO 2: Una fecha anterior a la Época Unix (milisegundos negativos)

const milisegundosAntes1970 = -15778800000; // Esto equivale al 1 de enero de 1969, 00:00:00 UTC
const fechaPasada = new Date(milisegundosAntes1970);

console.log(fechaPasada);Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN: Similar al anterior, pero para fechas históricas. Si estás en Argentina, verías: ‘Tue Dec 31 1968 21:00:00 GMT-0300 (Argentina Standard Time)’

4.3. new Date(dateString): Desde una cadena de texto

Puedes pasar una cadena de texto que represente una fecha y hora. JavaScript intentará analizar (parsear) esta cadena y crear el objeto Date correspondiente.

¡Precaución aquí! La interpretación de cadenas de texto puede variar entre navegadores y entornos de ejecución si no usas un formato estandarizado. El formato más recomendado y universalmente confiable es el ISO 8601.

• Formato ISO 8601:YYYY-MM-DDTHH:mm:ss.sssZ
  • YYYY: Año (ej. 2024)
  • MM: Mes (01-12)
  • DD: Día (01-31)
  • T: Separador literal entre fecha y hora
  • HH: Horas (00-23)
  • mm: Minutos (00-59)
  • ss: Segundos (00-59)
  • .sss: Milisegundos (opcional)
  • Z: Indica que la hora es en UTC (Zero offset). Si no pones Z, el navegador intentará interpretarlo en tu zona horaria local o en una zona horaria específica si se proporciona un offset (ej. +03:00 o -05:00).

// EJEMPLO: Usando formato ISO 8601 (con Z para UTC)

const isoStringUTC = "2024-10-26T14:30:00Z"; // 26 de octubre de 2024, 14:30:00 UTC
const fechaDesdeISOUTC = new Date(isoStringUTC);

console.log(fechaDesdeISOUTC);Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN: La ‘Z’ al final le dice a JavaScript que la hora proporcionada (14:30) está en UTC. JavaScript luego la convierte a tu zona horaria local para mostrarla. (En Argentina, sería ‘Sat Oct 26 2024 11:30:00 GMT-0300’).

4.4. new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds): Componentes individuales

Esta es la forma más explícita y te da el control más granular. Pasas cada componente de la fecha y hora como un argumento separado.

¡MUY IMPORTANTE! monthIndex es basado en cero (0). Esto significa:

• 0 para Enero
• 1 para Febrero
• …
• 11 para Diciembre

Si omites argumentos desde la derecha (por ejemplo, solo pasas año, mes y día), los valores faltantes se establecerán por defecto a sus mínimos (0 para horas, minutos, segundos, milisegundos; 1 para el día si solo pasas año y mes).

// EJEMPLO: Solo Año, Mes, Día
// ¡Ojo! 7 es agosto (mes 8) porque los meses son base 0.

const miCumple = new Date(1990, 7, 15); // 15 de agosto de 1990, 00:00:00 en tu zona horaria local
console.log(miCumple);Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN: Se crea una fecha para el 15 de agosto de 1990. La hora, minutos, segundos y milisegundos se inicializan a 00:00:00.000. Esta fecha se interpreta en la zona horaria local de tu sistema.

// EJEMPLO 2: Año, Mes, Día y Hora (completo)

const horaReunion = new Date(2025, 8, 10, 14, 30, 0, 0); // 10 de septiembre de 2025, 14:30:00.000
console.log(horaReunion);Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN: Se especifica cada componente de la fecha y hora. De nuevo, los meses son base 0, así que 8 es septiembre. Esta fecha también se interpreta en la zona horaria local.

// EJEMPLO 3: Comportamiento con valores "fuera de rango"

const fechaLoca = new Date(2025, 0, 32); // Enero tiene 31 días, ¿qué pasará con el día 32?
console.log(fechaLoca);Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN: JavaScript es inteligente. Si pasas un valor «fuera de rango», automáticamente ajusta la fecha. En este caso, el día 32 de enero se convierte al 1 de febrero de 2025. Esto es muy útil, pero debes ser consciente de ello.

CONCLUSIÓN: Entender estas cuatro formas de crear instancias de Date es el pilar para cualquier operación que quieras realizar con fechas en JavaScript. Te da el poder de especificar el momento exacto que necesitas, ya sea el presente, un momento histórico o uno futuro.

5. Obtención de componentes de la fecha y hora

Los métodos get*() te permiten extraer información específica de un objeto Date. Es como mirar las diferentes agujas de un reloj o los números de un calendario. Es fundamental entender que estos métodos te devuelven los valores en la zona horaria local de tu sistema por defecto.

5.1. Métodos get*() para componentes en hora local

Aquí están los métodos más comunes para obtener componentes de la fecha y hora, interpretados en la zona horaria de donde se está ejecutando el código (en tu caso, Argentina Standard Time, GMT-03:00).

const fechaEjemplo = new Date(2025, 6, 30, 22, 26, 52, 123); // 30 de julio de 2025, 22:26:52.123

// Obtener el año completo (ej. 2025)
const anio = fechaEjemplo.getFullYear(); // 2025

// Obtener el mes (0-11, donde 0 es enero y 11 es diciembre)
const mes = fechaEjemplo.getMonth(); // 6 (julio)

// Obtener el día del mes (1-31)
const diaDelMes = fechaEjemplo.getDate(); // 30

// Obtener el día de la semana (0-6, donde 0 es domingo y 6 es sábado)
const diaDeLaSemana = fechaEjemplo.getDay(); // 3 (miércoles)

// Obtener la hora (0-23)
const horas = fechaEjemplo.getHours(); // 22

// Obtener los minutos (0-59)
const minutos = fechaEjemplo.getMinutes(); // 26

// Obtener los segundos (0-59)
const segundos = fechaEjemplo.getSeconds(); // 52

// Obtener los milisegundos (0-999)
const milisegundos = fechaEjemplo.getMilliseconds(); // 123

console.log(`Año: ${anio}`);                 // Año: 2025
console.log(`Mes (0-11): ${mes}`);          // Mes (0-11): 6
console.log(`Día del mes: ${diaDelMes}`);   // Día del mes: 30
console.log(`Día de la semana (0=Dom): ${diaDeLaSemana}`); // Día de la semana (0=Dom): 3
console.log(`Horas: ${horas}`);             // Horas: 22
console.log(`Minutos: ${minutos}`);         // Minutos: 26
console.log(`Segundos: ${segundos}`);       // Segundos: 52
console.log(`Milisegundos: ${milisegundos}`); // Milisegundos: 123Lenguaje del código: JavaScript (javascript)

Explicación:

• getFullYear(): Devuelve el año con cuatro dígitos (ej., 2025).
• getMonth(): Devuelve el mes como un número entero de 0 (Enero) a 11 (Diciembre). ¡Cuidado con este! Es una fuente común de errores si olvidas que es base cero.
• getDate(): Devuelve el día del mes como un número del 1 al 31.
• getDay(): Devuelve el día de la semana como un número del 0 (Domingo) al 6 (Sábado).
• getHours(): Devuelve la hora del día como un número del 0 al 23.
• getMinutes(): Devuelve los minutos como un número del 0 al 59.
• getSeconds(): Devuelve los segundos como un número del 0 al 59.
• getMilliseconds(): Devuelve los milisegundos como un número del 0 al 999.

5.2. Los métodos getUTC*() para valores basados en la hora UTC.

¿Cuál es la diferencia entre hora local y UTC (Coordinated Universal Time)?

Este es uno de los conceptos más importantes y a menudo malentendidos al trabajar con fechas. UTC es un estándar de tiempo global, una especie de «hora cero» universal de la que se derivan todas las demás zonas horarias. Es el equivalente moderno del GMT (Greenwich Mean Time).

¿Por qué es importante UTC?……Imagina una aplicación que registra eventos de usuarios en diferentes partes del mundo. Si solo guardas las horas locales, tendrías un caos cuando un usuario en Buenos Aires (GMT-03:00) y uno en Madrid (GMT+02:00) realizan una acción al mismo tiempo. Sus horas locales serían muy diferentes.

Almacenar y procesar fechas en UTC elimina los problemas relacionados con los cambios de horario (Daylight Saving Time), las diferentes zonas horarias y asegura que tus datos de tiempo sean consistentes y universales. Solo debes convertir a la hora local del usuario justo antes de mostrar la fecha en la interfaz.

Para trabajar con UTC, JavaScript nos ofrece los métodos getUTC*(), que funcionan de manera idéntica a los get*() pero devuelven los valores basados en la hora UTC.

const fechaGlobal = new Date(2025, 6, 30, 22, 26, 52, 123); // En Argentina es 30 de julio de 2025, 22:26:52.123

// Obtener el año en UTC
const anioUTC = fechaGlobal.getUTCFullYear(); // 2025

// Obtener el mes en UTC (0-11)
const mesUTC = fechaGlobal.getUTCMonth(); // 6 (julio, porque enero = 0)

// Obtener el día del mes en UTC (1-31)
const diaDelMesUTC = fechaGlobal.getUTCDate(); // 31

// Obtener el día de la semana en UTC (0-6)
const diaDeLaSemanaUTC = fechaGlobal.getUTCDay(); // 4 (jueves)

// Obtener la hora en UTC (0-23)
const horasUTC = fechaGlobal.getUTCHours(); // 1

// Obtener los minutos en UTC (0-59)
const minutosUTC = fechaGlobal.getUTCMinutes(); // 26

// Obtener los segundos en UTC (0-59)
const segundosUTC = fechaGlobal.getUTCSeconds(); // 52

// Obtener los milisegundos en UTC (0-999)
const milisegundosUTC = fechaGlobal.getUTCMilliseconds(); // 123

console.log("\n--- Componentes UTC ---");
console.log(`Año UTC: ${anioUTC}`);             // Año UTC: 2025
console.log(`Mes UTC (0-11): ${mesUTC}`);       // Mes UTC (0-11): 6
console.log(`Día del mes UTC: ${diaDelMesUTC}`); // Día del mes UTC: 31
console.log(`Día de la semana UTC (0=Dom): ${diaDeLaSemanaUTC}`); // Día de la semana UTC: 4
console.log(`Horas UTC: ${horasUTC}`);          // Horas UTC: 1
console.log(`Minutos UTC: ${minutosUTC}`);      // Minutos UTC: 26
console.log(`Segundos UTC: ${segundosUTC}`);    // Segundos UTC: 52
console.log(`Milisegundos UTC: ${milisegundosUTC}`); // Milisegundos UTC: 123Lenguaje del código: JavaScript (javascript)

Explicación:

• Como estamos en GMT-03:00, y nuestra fecha local es 2025-07-30 22:26:52, al convertir a UTC (sumando 3 horas), los valores UTC serán 2025-07-31 01:26:52.
• Verás que getUTCHours() devuelve 1, y getUTCDate() devuelve 31, lo que confirma que estamos viendo el mismo punto en el tiempo, pero representado desde la perspectiva del tiempo universal.

5.3. getTime() y valueOf(): El corazón numérico de la fecha

Estos dos métodos son cruciales porque devuelven el valor numérico subyacente del objeto Date: la cantidad de milisegundos transcurridos desde la Época Unix (1 de enero de 1970, 00:00:00 UTC).

const otraFecha = new Date(2025, 6, 30, 22, 26, 52, 123);

const milisegundosDesdeEpoch = otraFecha.getTime();
const milisegundosPorValueOf = otraFecha.valueOf();

console.log("\n--- Milisegundos desde Época Unix ---");
console.log(`getTime(): ${milisegundosDesdeEpoch}`);
console.log(`valueOf(): ${milisegundosPorValueOf}`);
console.log(`¿Son iguales? ${milisegundosDesdeEpoch === milisegundosPorValueOf}`);

/*
--- Milisegundos desde Época Unix ---
getTime(): 1753916812123
valueOf(): 1753916812123
¿Son iguales? true
*/Lenguaje del código: JavaScript (javascript)

Explicación:

• getTime(): Este es el método más comúnmente usado para obtener los milisegundos.
• valueOf(): También devuelve los milisegundos.
  • En el contexto de los objetos Date, valueOf() se comporta igual que getTime(). Se usa implícitamente a menudo cuando JavaScript necesita convertir un objeto Date a un tipo primitivo (por ejemplo, al realizar operaciones matemáticas o comparaciones).
• Importancia: Estos valores son fundamentales para:
  • Comparar fechas: Simplemente comparas los números de milisegundos.
  • Realizar cálculos: Sumar o restar milisegundos es la forma más precisa de manipular fechas (ej., agregar 5 días).
  • Almacenamiento: Muchas APIs y bases de datos guardan fechas como números de milisegundos o segundos desde la época.

5.4. getTimezoneOffset(): La diferencia entre UTC y local

Este método devuelve la diferencia en minutos entre la hora UTC y la hora local del sistema. El valor es positivo si la zona horaria local está detrás de UTC (como en Argentina) y negativo si está delante.

const ahoraMismo = new Date();
const offsetEnMinutos = ahoraMismo.getTimezoneOffset();

const offsetEnHoras = offsetEnMinutos / 60; // Convertir a horas

console.log("\n--- Desplazamiento de Zona Horaria ---");
console.log(`Desplazamiento de zona horaria (minutos): ${offsetEnMinutos}`);
console.log(`Desplazamiento de zona horaria (horas): ${offsetEnHoras}`);Lenguaje del código: JavaScript (javascript)

Explicación:

• getTimezoneOffset(): Este método es útil si necesitas mostrar al usuario cuántas horas de diferencia hay respecto a UTC, o si estás haciendo cálculos complejos que requieren ajustar un tiempo UTC a una hora local específica manualmente (aunque esto último se evita con las funciones toLocaleString() o librerías externas que manejan mejor las zonas horarias).

---

CONCLUSIÓN: Con estos métodos get*(), getTime(), valueOf() y getTimezoneOffset(), tienes todas las herramientas para extraer y entender cada pieza de información contenida en un objeto Date, tanto desde la perspectiva local como universal.

6. Los métodos set*(), para modificar tu Date.

Mientras que los métodos get*() te permiten leer el estado de un objeto Date, los métodos set*() te permiten cambiarlo. Es como si los get*() fueran para ver las agujas del reloj, y los set*() para moverlas.

Es crucial recordar que los objetos Date son mutables. Esto significa que cuando usas un método set*(), estás modificando el mismo objeto Date original, no creando uno nuevo. Esto puede ser una fuente de errores si no tienes cuidado, especialmente cuando pasas objetos Date entre funciones.

6.1. Métodos set*() para componentes en hora local.

Estos métodos modifican el objeto Date basándose en la zona horaria local de tu sistema.

// Creamos una fecha inicial para trabajar
const miFechaModificable = new Date(2025, 6, 15, 10, 30, 0, 0); // 15 de julio de 2025, 10:30:00

console.log("Fecha Original:", miFechaModificable.toLocaleString());

// 1. setFullYear(year, monthIndex, day)
miFechaModificable.setFullYear(2026); // Cambia el año a 2026
console.log("Después de setFullYear(2026):", miFechaModificable.toLocaleString());

// Puedes pasar mes y día opcionalmente, o solo el año
miFechaModificable.setFullYear(2024, 0, 1); // Cambia a 1 de enero de 2024
console.log("Después de setFullYear(2024, 0, 1):", miFechaModificable.toLocaleString());

// Restablecemos para el siguiente ejemplo
miFechaModificable.setFullYear(2025, 6, 15, 10, 30, 0, 0); // Volvemos a 15 de julio de 2025

// 2. setMonth(monthIndex, day)
// ¡Recuerda que monthIndex es de 0 a 11!
miFechaModificable.setMonth(0); // Cambia el mes a Enero (0)
console.log("Después de setMonth(0):", miFechaModificable.toLocaleString());

miFechaModificable.setMonth(10, 20); // Cambia a 20 de Noviembre (10)
console.log("Después de setMonth(10, 20):", miFechaModificable.toLocaleString());

// 3. setDate(day)
// Vuelve al 1 de enero de 2024 para simplificar el ejemplo
miFechaModificable.setFullYear(2024, 0, 1);
miFechaModificable.setDate(25); // Cambia el día del mes a 25
console.log("Después de setDate(25):", miFechaModificable.toLocaleString());

// JavaScript maneja el desbordamiento de días automáticamente:
miFechaModificable.setDate(32); // Enero solo tiene 31 días, esto avanza a Febrero
console.log("Después de setDate(32) (desbordamiento):", miFechaModificable.toLocaleString());

// 4. setHours(hours, minutes, seconds, milliseconds)
miFechaModificable.setHours(18); // Cambia la hora a las 18:00 (6 PM)
console.log("Después de setHours(18):", miFechaModificable.toLocaleString());

miFechaModificable.setHours(8, 45, 10); // Cambia a 08:45:10
console.log("Después de setHours(8, 45, 10):", miFechaModificable.toLocaleString());

// 5. setMinutes(minutes, seconds, milliseconds)
miFechaModificable.setMinutes(5); // Cambia los minutos a 05
console.log("Después de setMinutes(5):", miFechaModificable.toLocaleString());

// 6. setSeconds(seconds, milliseconds)
miFechaModificable.setSeconds(30); // Cambia los segundos a 30
console.log("Después de setSeconds(30):", miFechaModificable.toLocaleString());

// 7. setMilliseconds(milliseconds)
miFechaModificable.setMilliseconds(500); // Cambia los milisegundos a 500
console.log("Después de setMilliseconds(500):", miFechaModificable.toLocaleString());
Lenguaje del código: JavaScript (javascript)

Explicación de set*() en Hora Local:

• setFullYear(year, [monthIndex], [day]): Establece el año. Opcionalmente, puedes establecer también el mes y el día.
• setMonth(monthIndex, [day]): Establece el mes. ¡Recuerda que el monthIndex es basado en cero (0 para enero, 11 para diciembre)! Opcionalmente, puedes establecer el día del mes. Si el día excede el número de días en el nuevo mes, JavaScript lo ajustará automáticamente al mes siguiente (ej., 31 de abril se convierte en 1 de mayo).
• setDate(day): Establece el día del mes (1-31). Al igual que setMonth(), maneja automáticamente los desbordamientos, ajustando el mes si el día es demasiado grande para el mes actual.
• setHours(hours, [minutes], [seconds], [milliseconds]): Establece la hora. Puedes especificar horas (0-23), y opcionalmente minutos, segundos y milisegundos. Los valores fuera de rango se «enrollan» al día siguiente (ej., 25 horas se convierten en 1 hora del día siguiente).
• setMinutes(minutes, [seconds], [milliseconds]): Establece los minutos (0-59). Opcionalmente, segundos y milisegundos.
• setSeconds(seconds, [milliseconds]): Establece los segundos (0-59). Opcionalmente, milisegundos.
• setMilliseconds(milliseconds): Establece los milisegundos (0-999).

6.2. setUTC*(): Modificando componentes en UTC

Así como los métodos getUTC*() te permitían obtener valores basados en el tiempo universal coordinado, los métodos setUTC*() te permiten modificar el objeto Date basándose en valores UTC, ignorando la zona horaria local. Esto es excelente para garantizar que tus modificaciones de fecha sean universales y no se vean afectadas por la ubicación del usuario.

// Creamos una nueva fecha para trabajar con UTC
const fechaUTCModificable = new Date(); // Fecha y hora actuales, localmente

console.log("\nFecha Original (Local):", fechaUTCModificable.toLocaleString());
console.log("Fecha Original (UTC):", fechaUTCModificable.toISOString());

// 1. setUTCFullYear(year, monthIndex, day)
fechaUTCModificable.setUTCFullYear(2027); // Cambia el año UTC a 2027
console.log("Después de setUTCFullYear(2027) (UTC):", fechaUTCModificable.toISOString());
console.log("Después de setUTCFullYear(2027) (Local):", fechaUTCModificable.toLocaleString());
// Explicación: Observa cómo el año en la representación ISO (UTC) cambia a 2027.
// La representación local se ajusta automáticamente para reflejar ese mismo punto en el tiempo.

// Restablecemos aproximadamente
fechaUTCModificable.setUTCFullYear(2025, 6, 30); // Volvemos a 30 de julio de 2025 UTC

// 2. setUTCMonth(monthIndex, day)
fechaUTCModificable.setUTCMonth(0); // Cambia el mes UTC a Enero (0)
console.log("Después de setUTCMonth(0) (UTC):", fechaUTCModificable.toISOString());
console.log("Después de setUTCMonth(0) (Local):", fechaUTCModificable.toLocaleString());

// 3. setUTCDate(day)
fechaUTCModificable.setUTCDate(15); // Cambia el día del mes UTC a 15
console.log("Después de setUTCDate(15) (UTC):", fechaUTCModificable.toISOString());
console.log("Después de setUTCDate(15) (Local):", fechaUTCModificable.toLocaleString());

// 4. setUTCHours(hours, minutes, seconds, milliseconds)
fechaUTCModificable.setUTCHours(12, 0, 0); // Cambia la hora UTC a 12:00:00
console.log("Después de setUTCHours(12, 0, 0) (UTC):", fechaUTCModificable.toISOString());
console.log("Después de setUTCHours(12, 0, 0) (Local):", fechaUTCModificable.toLocaleString());
// Explicación: Si tu hora local es GMT-03:00, y estableces 12:00 UTC,
// localmente se mostrará como 09:00 (12 - 3 = 9). El mismo punto en el tiempo,
// pero la perspectiva de la zona horaria cambia la visualización.
Lenguaje del código: JavaScript (javascript)

Explicación de setUTC*():

• Los métodos setUTCFullYear(), setUTCMonth(), setUTCDate(), setUTCHours(), setUTCMinutes(), setUTCSeconds(), y setUTCMilliseconds() funcionan exactamente igual que sus contrapartes sin UTC, pero aplican las modificaciones al objeto Date como si estuvieras trabajando directamente en la zona horaria UTC.
• Esto es invaluable para aplicaciones que necesitan manejar fechas de manera consistente a nivel global, como sistemas de reserva, plataformas de eventos internacionales, o almacenamiento de datos en bases de datos que esperan UTC.

6.3. Consideración importante: Mutabilidad

Recuerda siempre que estos métodos set*() modifican el objeto Date original. Si necesitas preservar el objeto Date original y obtener una nueva fecha con las modificaciones, primero debes crear una copia:

const fechaOriginal = new Date(2025, 6, 10); // 10 de julio de 2025
console.log("Original:", fechaOriginal.toLocaleString());

// Para modificar sin afectar el original:
const fechaModificada = new Date(fechaOriginal.getTime()); // Creamos una copia
fechaModificada.setDate(20); // Modificamos la copia

console.log("Original (sin cambios):", fechaOriginal.toLocaleString());
console.log("Modificada (nueva):", fechaModificada.toLocaleString());
// Explicación: Aunque la copia se basa en el mismo punto de tiempo inicial,
// es un objeto Date distinto, por lo que podemos modificarlo sin alterar el original.
Lenguaje del código: JavaScript (javascript)

7. Formateo de fechas para visualización

Una vez que tienes un objeto Date, raramente querrás mostrar su representación por defecto (como Wed Jul 30 2025 21:57:35 GMT-0300 (Argentina Standard Time)) directamente al usuario.

En su lugar, usas métodos de formateo para convertir el objeto Date en una cadena de texto más amigable y comprensible.

Aquí te muestro los métodos más importantes para formatear fechas y sus usos, con ejemplos claros.

7.1. Representaciones de cadena básicas

Estos métodos devuelven una cadena de texto simple y útil para depuración, pero a menudo no son la mejor opción para mostrar a los usuarios.

7.1.1. toString()

Devuelve la representación completa de la fecha y hora, incluyendo la zona horaria.

const fecha = new Date();
const representacionString = fecha.toString();

console.log(representacionString);Lenguaje del código: JavaScript (javascript)

Explicación: La salida es una cadena larga y descriptiva que incluye el día de la semana, el mes, el día, el año, la hora y la zona horaria. Ejemplo de salida: ‘Wed Jul 30 2025 21:57:35 GMT-0300 (Argentina Standard Time)’

7.1.2. toDateString()

Devuelve solo la parte de la fecha de la representación en cadena, sin la hora.

const fecha = new Date();
const representacionFecha = fecha.toDateString();

console.log(representacionFecha);Lenguaje del código: JavaScript (javascript)

Explicación: La salida se limita a la fecha, en un formato legible. Ejemplo de salida: ‘Wed Jul 30 2025’

7.1.3. toTimeString()

Devuelve solo la parte de la hora de la representación en cadena, incluyendo la zona horaria.

const fecha = new Date();
const representacionHora = fecha.toTimeString();

console.log(representacionHora);Lenguaje del código: JavaScript (javascript)

Explicación: La salida se centra en la hora, los minutos, los segundos y la zona horaria. Ejemplo de salida: ’21:57:35 GMT-0300 (Argentina Standard Time)’

7.2. Formatos estandarizados para intercambio de datos

Cuando necesitas enviar fechas a una API, guardarlas en una base de datos o asegurarte de que tu formato sea entendido universalmente, estos métodos son tu mejor aliado.

7.2.1. toISOString()

Este es uno de los métodos más importantes. Genera una cadena de fecha en el formato ISO 8601, que es un estándar internacional para representar fechas y horas. La salida siempre se representa en la zona horaria UTC.

const fecha = new Date();
const formatoISO = fecha.toISOString();

console.log(formatoISO);Lenguaje del código: JavaScript (javascript)

Explicación: La salida es una cadena estandarizada que incluye año, mes, día, hora, minutos, segundos y milisegundos, seguida de la ‘Z’ que indica UTC (tiempo universal). Ejemplo de salida: ‘2025-07-31T00:57:35.456Z’ Si tu hora local es 21:57, la hora UTC será 00:57 del día siguiente (+3 horas).

7.2.2. toJSON()

Este método funciona de manera idéntica a toISOString(). Su nombre sugiere su propósito: se llama automáticamente cuando serializas un objeto Date a una cadena JSON, por ejemplo, usando JSON.stringify().

const fecha = new Date();
const objetoConFecha = {
  evento: "Conferencia de IA",
  fechaInicio: fecha
};

const jsonString = JSON.stringify(objetoConFecha);

console.log(jsonString);Lenguaje del código: JavaScript (javascript)

Explicación: Cuando JSON.stringify() encuentra un objeto Date, llama internamente a .toJSON() para obtener una representación en cadena. Ejemplo de salida: ‘{«evento»:»Conferencia de IA»,»fechaInicio»:»2025-07-31T00:57:35.456Z»}’

7.3. Formatos localizados y personalizados

Aquí es donde la magia ocurre para la experiencia del usuario. Estos métodos formatean la fecha según las convenciones del idioma y la región del usuario.

7.3.1. toLocaleString()

Este es el método más potente y flexible para la visualización. Devuelve una representación de cadena de la fecha y hora en un formato que coincide con la configuración regional (idioma y país) del navegador.

Lo que lo hace increíblemente útil es que puedes pasarle argumentos para personalizar la salida.

• locales (argumento 1): Una cadena (o un arreglo de cadenas) que especifica el idioma. Por ejemplo, 'es-AR' para español de Argentina o 'en-US' para inglés de Estados Unidos.
• options (argumento 2): Un objeto con un montón de propiedades para controlar el formato (estilo de fecha, hora, zona horaria, etc.).

const fecha = new Date();

// Ejemplo básico sin opciones (usa la configuración por defecto del navegador)
const formatoBasico = fecha.toLocaleString();
console.log("Básico:", formatoBasico);
// Ejemplo de salida: '30/7/2025, 21:57:35'

// Ejemplo con idioma español de Argentina y opciones
const formatoArgentina = fecha.toLocaleString('es-AR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  timeZone: 'America/Argentina/Cordoba'
});
console.log("Localizado (Argentina):", formatoArgentina);Lenguaje del código: JavaScript (javascript)

Explicación: Le pedimos el año completo, el nombre del mes, el día, la hora completa, etc. Ejemplo de salida: ’30 de julio de 2025, 21:57:35′

---

CONCLUSIÓN: Como puedes ver, toLocaleString() es la herramienta definitiva para presentar fechas a los usuarios de manera que les resulte familiar y fácil de entender. Mientras que toISOString() y toJSON() son perfectos para el intercambio de datos entre sistemas, donde la precisión y el estándar son más importantes que la legibilidad humana.

8. Manipulación y cálculos con fechas

Las operaciones matemáticas con fechas no son tan sencillas como con números. No puedes simplemente sumar fecha + 5 días. Para manipular el tiempo de forma fiable, debes trabajar con la representación numérica interna de la fecha: los milisegundos desde la Época Unix.

8.1. Suma y resta de tiempo

La forma más robusta y segura de sumar o restar tiempo es convertir la operación a milisegundos y aplicarla al valor de getTime().

Aquí te presento un ejemplo para sumar y restar días. El mismo principio aplica para horas, minutos, etc. Solo necesitas ajustar el factor de conversión.

const hoy = new Date();
const fechaFutura = new Date(hoy); // Siempre crea una copia para no modificar el original
const fechaPasada = new Date(hoy); // Otra copia para la resta

console.log(`Fecha de hoy: ${hoy.toLocaleDateString()}`);
// Resultado: Fecha de hoy: 1/8/2025

// Sumar 5 días
const diasASumar = 5;
const milisegundosPorDia = 24 * 60 * 60 * 1000; // 86,400,000 milisegundos en un día

fechaFutura.setTime(fechaFutura.getTime() + (diasASumar * milisegundosPorDia));
console.log(`Fecha en 5 días: ${fechaFutura.toLocaleDateString()}`);
// Resultado: Fecha en 5 días: 6/8/2025

// Restar 10 días
const diasARestar = 10;
fechaPasada.setTime(fechaPasada.getTime() - (diasARestar * milisegundosPorDia));
console.log(`Fecha hace 10 días: ${fechaPasada.toLocaleDateString()}`);
// Resultado: Fecha hace 10 días: 22/7/2025
Lenguaje del código: JavaScript (javascript)

Explicación:

• Primero, creamos copias de la fecha original (hoy) para asegurarnos de que no la modificamos. Esto es una buena práctica para evitar efectos secundarios inesperados.
• Para sumar o restar días, calculamos cuántos milisegundos hay en el número de días deseado (24 * 60 * 60 * 1000).
• Luego, usamos el método setTime() para establecer el nuevo valor de la fecha, que es el valor anterior más (o menos) los milisegundos que hemos calculado. Este método es ideal porque se encarga de reajustar todos los componentes de la fecha (día, mes, año, etc.) automáticamente.

8.2. Comparación de fechas

La forma más sencilla y precisa de comparar dos objetos Date es comparar sus valores numéricos en milisegundos, ya sea usando getTime() o simplemente dejando que JavaScript haga la coerción de tipo.

const fecha1 = new Date(2025, 7, 1); // 1 de agosto de 2025
const fecha2 = new Date(2025, 7, 5); // 5 de agosto de 2025
const fecha3 = new Date(2025, 7, 1); // Otra instancia del 1 de agosto

// Comparar si una fecha es anterior a otra
console.log(`¿Es fecha1 anterior a fecha2? ${fecha1.getTime() < fecha2.getTime()}`);
// Resultado: ¿Es fecha1 anterior a fecha2? true

// Comparar si una fecha es posterior a otra
console.log(`¿Es fecha2 posterior a fecha1? ${fecha2.getTime() > fecha1.getTime()}`);
// Resultado: ¿Es fecha2 posterior a fecha1? true

// Comparar si dos fechas son iguales
// La forma más robusta es comparar los valores numéricos, no los objetos
console.log(`¿Son fecha1 y fecha3 iguales? ${fecha1.getTime() === fecha3.getTime()}`);
// Resultado: ¿Son fecha1 y fecha3 iguales? true

// ¡Recordatorio! Los objetos en sí mismos son diferentes
console.log(`¿Son fecha1 y fecha3 el mismo objeto? ${fecha1 === fecha3}`);
// Resultado: ¿Son fecha1 y fecha3 el mismo objeto? false
Lenguaje del código: JavaScript (javascript)

Explicación:

• La comparación directa de objetos Date con === (operador de igualdad estricta) siempre devolverá false si no son la misma instancia en memoria, incluso si representan el mismo momento.
• Al usar getTime(), obtenemos un número primitivo. La comparación de números es directa y fiable para determinar si una fecha es anterior, posterior o idéntica en el tiempo a otra.

8.3. Cálculo de diferencias entre fechas

Para calcular la diferencia entre dos fechas, simplemente restamos sus valores numéricos y luego convertimos el resultado (en milisegundos) a la unidad de tiempo deseada (días, horas, etc.).

const fechaInicio = new Date(2025, 0, 1); // 1 de enero de 2025
const fechaFin = new Date(2025, 0, 10); // 10 de enero de 2025

// Calcular la diferencia en milisegundos
const diferenciaMilisegundos = fechaFin.getTime() - fechaInicio.getTime();

// Convertir a días
const milisegundosPorDia = 24 * 60 * 60 * 1000;
const diferenciaDias = diferenciaMilisegundos / milisegundosPorDia;

console.log(`La diferencia entre las fechas es de ${diferenciaMilisegundos} milisegundos`);
// Resultado: La diferencia entre las fechas es de 777600000 milisegundos
console.log(`La diferencia entre las fechas es de ${diferenciaDias} días`);
// Resultado: La diferencia entre las fechas es de 9 días
Lenguaje del código: JavaScript (javascript)

Explicación:

• El resultado de fechaFin.getTime() - fechaInicio.getTime() es la diferencia en milisegundos.
• Dividimos este valor por el número de milisegundos en un día para obtener el número de días. La misma lógica se aplica para calcular horas, minutos, etc.

8.4. Manejo de años bisiestos y fin de mes

Los métodos integrados de Date manejan automáticamente las complejidades de los calendarios, como los años bisiestos y los diferentes números de días en cada mes.

const fechaFebrero = new Date(2024, 1, 1); // Año bisiesto: 1 de febrero de 2024
console.log(`Fecha de inicio: ${fechaFebrero.toLocaleDateString()}`);
// Resultado: Fecha de inicio: 1/2/2024

// Sumar 28 días
fechaFebrero.setDate(fechaFebrero.getDate() + 28);
console.log(`Después de sumar 28 días: ${fechaFebrero.toLocaleDateString()}`);
// Resultado: Después de sumar 28 días: 29/2/2024
// Explicación: ¡Febrero de 2024 tiene 29 días! Date lo sabe y lo maneja.

// Sumar 29 días a la fecha original
const fechaFebrero2 = new Date(2024, 1, 1);
fechaFebrero2.setDate(fechaFebrero2.getDate() + 29);
console.log(`Después de sumar 29 días: ${fechaFebrero2.toLocaleDateString()}`);
// Resultado: Después de sumar 29 días: 1/3/2024
// Explicación: Después del 29 de febrero, la fecha avanza automáticamente al 1 de marzo.

// ¿Qué pasaría en un año no bisiesto?
const fechaFebreroNoBisiesto = new Date(2025, 1, 1); // Año no bisiesto: 1 de febrero de 2025
fechaFebreroNoBisiesto.setDate(fechaFebreroNoBisiesto.getDate() + 28);
console.log(`En año no bisiesto, después de sumar 28 días: ${fechaFebreroNoBisiesto.toLocaleDateString()}`);
// Resultado: En año no bisiesto, después de sumar 28 días: 1/3/2025
// Explicación: Febrero de 2025 tiene 28 días, así que sumar 28 días nos lleva a marzo.
Lenguaje del código: JavaScript (javascript)

Explicación:

• JavaScript, al manipular el día del mes con setDate(), es lo suficientemente inteligente como para ajustar el mes y el año si el número de días se desborda.
• Esto te ahorra tener que escribir lógica compleja para detectar años bisiestos o el número de días en cada mes.

9. Buenas prácticas en el uso del objeto date en JS.

9.1. Cuidado con el manejo de las zonas Horarias (Timezones):

El manejo de zonas horarias es, sin duda, el aspecto más complejo de las fechas. Un error aquí puede causar que tu aplicación muestre eventos en el día equivocado o que los cálculos de tiempo sean incorrectos.

La solución profesional es una regla simple: trabaja con UTC siempre que sea posible.

¿Por qué UTC es la mejor opción?:

1. Consistencia:
   • UTC no tiene horario de verano (Daylight Saving Time), lo que significa que un cálculo de 24 horas siempre resultará en 24 horas, sin importar la época del año.
2. Neutralidad:
   • Almacenar datos en UTC evita que tu aplicación dependa de la zona horaria del servidor o del usuario, garantizando que el «momento exacto» sea el mismo para todos.
3. Sencillez:
   • La conversión a la zona horaria local del usuario es el último paso, justo antes de la visualización, simplificando la lógica de negocio.

// Mal: Depende de la zona horaria local
const fechaLocal = new Date(2025, 10, 20); // 20 de noviembre de 2025 local
const fechaLocalFin = new Date(fechaLocal.getFullYear(), fechaLocal.getMonth(), fechaLocal.getDate() + 1);
console.log(fechaLocalFin.toLocaleString());
// Resultado: 21/11/2025 0:00:00. El cálculo es local, lo que puede fallar con cambios de DST.

// Bien: Trabajar con UTC
const fechaUTC = new Date(Date.UTC(2025, 10, 20)); // 20 de noviembre de 2025 UTC
const fechaUTCFin = new Date(fechaUTC.getUTCFullYear(), fechaUTC.getUTCMonth(), fechaUTC.getUTCDate() + 1);
console.log(fechaUTCFin.toISOString());
// Resultado: 2025-11-21T00:00:00.000Z
// Explicación: Los cálculos se realizan en UTC, por lo que son universalmente correctos.
// La conversión a la zona horaria local se hace solo para la visualización final, si es necesario.
Lenguaje del código: JavaScript (javascript)

9.2. Librerías externas: Cuando Date no es suficiente

Aunque el objeto Date es poderoso, su API puede ser verbosa y a veces confusa (getMonth() basado en 0, la mutabilidad, etc.). Para tareas más complejas, hay librerías que simplifican enormemente el trabajo.

1. date-fns:
   • date-fns es una biblioteca moderna, modular y funcional. No modifica los objetos Date originales (inmutabilidad por defecto) y te permite importar solo las funciones que necesitas, manteniendo tu código ligero.
2. Moment.js:
   • Moment.js es históricamente la librería más popular, pero ahora está en modo de mantenimiento. Su uso se desaconseja para nuevos proyectos, pero es probable que la encuentres en código heredado. Su principal problema es que sus objetos son mutables y es una librería bastante pesada.
3. Luxon:
   • Luxon es creada por el mismo equipo de Moment.js, pero con un enfoque en la inmutabilidad y una API más robusta para el manejo de zonas horarias. Es una excelente alternativa moderna.

// Ejemplo con date-fns (requiere instalación: npm install date-fns)
// import { addDays, format } from 'date-fns';

const hoy = new Date();
const fechaFutura = addDays(hoy, 5); // No modifica `hoy`
const fechaFormateada = format(fechaFutura, 'dd/MM/yyyy');

console.log(fechaFormateada);
// Resultado: "06/08/2025"
// Explicación: `date-fns` ofrece funciones claras como `addDays()` que devuelven una nueva fecha,
// evitando la mutabilidad. Su función `format()` es mucho más flexible que `toLocaleString()`.
Lenguaje del código: JavaScript (javascript)

9.3. Inmutabilidad: Evita efectos secundarios

Como vimos, los objetos Date son mutables. Un método set*() o setTime() cambia el objeto original. Para evitar errores, siempre haz una copia de la fecha antes de modificarla.

const eventoOriginal = new Date(2025, 7, 1); // 1 de agosto
const eventoModificado = new Date(eventoOriginal.getTime()); // Creamos una copia

// Modificamos solo la copia
eventoModificado.setDate(15);

console.log(`Original: ${eventoOriginal.toLocaleDateString()}`);
// Resultado: Original: 1/8/2025

console.log(`Modificado: ${eventoModificado.toLocaleDateString()}`);
// Resultado: Modificado: 15/8/2025
// Explicación: La fecha original (`eventoOriginal`) no fue alterada, lo cual es fundamental
// para evitar que una función modifique un objeto que otra parte de tu código está usando.
Lenguaje del código: JavaScript (javascript)

9.4. La validación de fechas es importante.

Nunca asumas que una entrada de usuario o una respuesta de API es una fecha válida. Siempre valida los objetos Date para evitar errores.

La forma más simple y confiable es verificar si el valor numérico de la fecha es un número (isNaN). Una fecha no válida se representa como Invalid Date y su valor numérico es NaN.

// Entrada del usuario que podría ser incorrecta
const fechaStringCorrecta = "2025-08-01";
const fechaStringIncorrecta = "30-febrero-2025";

const fecha1 = new Date(fechaStringCorrecta);
const fecha2 = new Date(fechaStringIncorrecta);

// Verificación
if (isNaN(fecha1.getTime())) {
    console.log("Fecha 1 no es válida.");
} else {
    console.log("Fecha 1 es válida.");
    // Resultado: Fecha 1 es válida.
}

if (isNaN(fecha2.getTime())) {
    console.log("Fecha 2 no es válida.");
    // Resultado: Fecha 2 no es válida.
} else {
    console.log("Fecha 2 es válida.");
}
Lenguaje del código: JavaScript (javascript)

Explicación:

• Si intentas crear una new Date() con un formato que JavaScript no puede interpretar, devolverá un objeto Date con el valor interno NaN (Not a Number).
• El método isNaN() es la forma perfecta de detectar este estado. Es la validación de fechas más importante que debes aplicar.

10. Preguntas frecuentes y resumen sobre el objeto date en JS.