Manipulación de fechas y horas en JavaScript: Una guía completa con ejemplos

El manejo de fechas y horas es una tarea común en el desarrollo web, y JavaScript proporciona el objeto Date para facilitar esta labor. Con él, puedes obtener la fecha y hora actuales, crear objetos de fecha específicos, manipular fechas y formatearlas de diversas maneras. En esta guía, exploraremos a fondo el objeto Date de JavaScript, mostrando ejemplos prácticos y explicando los conceptos clave.

Introducción al objeto Date

El objeto Date en JavaScript representa un momento en el tiempo, basado en el tiempo universal coordinado (UTC). Para crear un nuevo objeto Date, puedes utilizar el constructor new Date() de varias formas:

• Obtener la fecha y hora actual:
  javascript
const now = new Date();
console.log(now); // Imprime la fecha y hora actuales en el formato UTC


• Crear un objeto Date a partir de una cadena de texto:
  javascript
const dateString = "2023-12-15T12:00:00.000Z"; // Formato ISO 8601
const date = new Date(dateString);
console.log(date);


• Especificar valores individuales para año, mes, día, hora, minuto, segundo y milisegundo:
  javascript
const date = new Date(2023, 11, 15, 12, 0, 0, 0); // Meses comienzan desde 0 (0 = enero, 11 = diciembre)
console.log(date);


• Crear un objeto Date a partir de un valor en milisegundos:
  javascript
const milliseconds = 1700000000000;
const date = new Date(milliseconds);
console.log(date);


Métodos para obtener información de la fecha

Una vez que tienes un objeto Date, puedes utilizar varios métodos para obtener información sobre la fecha y la hora:

• getFullYear(): Obtiene el año de la fecha.
• getMonth(): Obtiene el mes de la fecha (0 = enero, 11 = diciembre).
• getDate(): Obtiene el día del mes de la fecha.
• getHours(): Obtiene la hora de la fecha (0 – 23).
• getMinutes(): Obtiene los minutos de la fecha (0 – 59).
• getSeconds(): Obtiene los segundos de la fecha (0 – 59).
• getMilliseconds(): Obtiene los milisegundos de la fecha (0 – 999).
• getDay(): Obtiene el día de la semana (0 = domingo, 6 = sábado).
• getTime(): Obtiene el valor de la fecha en milisegundos desde el 1 de enero de 1970 UTC.
• getUTCFullYear(): Obtiene el año de la fecha en UTC.
• getUTCMonth(): Obtiene el mes de la fecha en UTC.
• getUTCDate(): Obtiene el día del mes de la fecha en UTC.
• getUTCHours(): Obtiene la hora de la fecha en UTC.
• getUTCMinutes(): Obtiene los minutos de la fecha en UTC.
• getUTCSeconds(): Obtiene los segundos de la fecha en UTC.
• getUTCMilliseconds(): Obtiene los milisegundos de la fecha en UTC.

Ejemplo:
javascript
const now = new Date();
console.log(`Fecha actual: ${now.getDate()}/${now.getMonth() + 1}/${now.getFullYear()}`);
console.log(`Hora actual: ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`);


Métodos para establecer valores de la fecha

También puedes modificar los valores de la fecha utilizando los métodos set...() del objeto Date:

• setFullYear(year, month, day): Establece el año, mes y día de la fecha.
• setMonth(month, day): Establece el mes y día de la fecha.
• setDate(day): Establece el día del mes de la fecha.
• setHours(hour, minute, second, millisecond): Establece la hora, minuto, segundo y milisegundo de la fecha.
• setMinutes(minute, second, millisecond): Establece los minutos, segundos y milisegundos de la fecha.
• setSeconds(second, millisecond): Establece los segundos y milisegundos de la fecha.
• setMilliseconds(millisecond): Establece los milisegundos de la fecha.
• setTime(milliseconds): Establece el valor de la fecha en milisegundos desde el 1 de enero de 1970 UTC.

Ejemplo:
javascript
const date = new Date();
console.log(date); // Imprime la fecha y hora actuales
date.setMonth(11); // Cambia el mes a diciembre
date.setDate(25); // Cambia el día a 25
console.log(date); // Imprime la fecha modificada


Formateando fechas en JavaScript

El objeto Date en JavaScript no ofrece métodos integrados para formatear fechas en cadenas de texto con un formato específico. Sin embargo, puedes utilizar métodos de cadena para crear tu propio formato de fecha:

• toString(): Devuelve una cadena de texto que representa la fecha en formato legible para humanos.
• toDateString(): Devuelve una cadena de texto que representa la fecha en formato corto (por ejemplo: «Tue Dec 19 2023»).
• toTimeString(): Devuelve una cadena de texto que representa la hora en formato corto (por ejemplo: «16:48:35 GMT-0500 (Hora estándar del este)»).
• toISOString(): Devuelve una cadena de texto que representa la fecha en formato ISO 8601 (por ejemplo: «2023-12-19T16:48:35.000Z»).
• toJSON(): Devuelve una cadena de texto que representa la fecha en formato JSON (similar a ISO 8601).

Ejemplo:
javascript
const now = new Date();
console.log(now.toString()); // Imprime la fecha y hora en formato legible
console.log(now.toDateString()); // Imprime la fecha en formato corto
console.log(now.toTimeString()); // Imprime la hora en formato corto
console.log(now.toISOString()); // Imprime la fecha en formato ISO 8601
console.log(now.toJSON()); // Imprime la fecha en formato JSON


Fechas y horas en JavaScript: Ejemplos prácticos

1. Mostrar la fecha y hora actual en una página web:

javascript
const now = new Date();
const date = now.toDateString();
const time = now.toLocaleTimeString();
document.getElementById('date-time').innerHTML = `Fecha actual: ${date} - Hora actual: ${time}`;


2. Crear un reloj digital que se actualiza cada segundo:

«javascript
function updateClock() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const timeString =${hours.toString().padStart(2, ‘0’)}:${minutes.toString().padStart(2, ‘0’)}:${seconds.toString().padStart(2, ‘0’)}`;
document.getElementById(‘clock’).innerHTML = timeString;
}

setInterval(updateClock, 1000); // Actualiza el reloj cada segundo
«`

3. Calcular la diferencia entre dos fechas:

javascript
const date1 = new Date('2023-12-15T12:00:00.000Z');
const date2 = new Date('2023-12-20T18:00:00.000Z');
const timeDifference = date2.getTime() - date1.getTime();
const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
console.log(`Diferencia entre las fechas: ${daysDifference} días`);


4. Formatear fechas según la configuración regional del usuario:

javascript
const now = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
const formattedDate = now.toLocaleDateString('es-ES', options); // Formato español
console.log(formattedDate);


Fechas y horas en JavaScript: Aspectos avanzados

• Manipulación de zonas horarias: JavaScript proporciona métodos para trabajar con zonas horarias, como getTimezoneOffset() para obtener la diferencia en minutos entre la zona horaria local y UTC, y toLocaleString() para formatear fechas y horas en función de la configuración regional del usuario.

• Formatos de fecha personalizados: Puedes usar bibliotecas de terceros como Moment.js para formatear fechas de manera flexible y con una amplia gama de opciones.

• Operaciones con fechas: Puedes realizar operaciones matemáticas con fechas, como sumar o restar días, meses o años.

Conclusión

El objeto Date de JavaScript te proporciona las herramientas necesarias para trabajar con fechas y horas en tus aplicaciones web. Dominar el uso de este objeto es crucial para desarrollar aplicaciones que interactúen con fechas de manera eficiente. Recuerda que para realizar operaciones más complejas o para formatear fechas según las preferencias del usuario, puedes recurrir a bibliotecas de terceros o utilizar métodos avanzados de JavaScript.