Manipular fechas con el objeto Date de JavaScript

Introducción

En este laboratorio, los participantes explorarán el poderoso objeto Date de JavaScript y aprenderán técnicas esenciales para manipular fechas y horas. A través de un enfoque práctico y exhaustivo, los estudiantes descubrirán cómo crear objetos Date utilizando varios métodos de inicialización, recuperar componentes de fecha específicos, formatear y mostrar información de fecha, modificar fechas utilizando métodos de configuración y realizar cálculos de fecha complejos.

El laboratorio ofrece una guía práctica y paso a paso para trabajar con fechas en JavaScript, cubriendo habilidades fundamentales como crear objetos Date a partir de la hora actual, timestamps específicos, cadenas de fecha y milisegundos desde la Época Unix. Al final de este laboratorio, los participantes habrán adquirido una sólida comprensión de las técnicas de manipulación de fechas, lo que les permitirá manejar eficazmente tareas relacionadas con fechas en sus aplicaciones de JavaScript.

Crear un nuevo objeto Date

En este paso, aprenderás cómo crear nuevos objetos Date en JavaScript, lo cual es fundamental para trabajar con fechas y horas. El objeto Date de JavaScript te permite trabajar con fechas y horas fácilmente.

Primero, abramos el WebIDE y creemos un nuevo archivo JavaScript llamado dates.js en el directorio ~/project.

Crea un nuevo objeto Date con diferentes métodos de inicialización:

// Crea un objeto Date que representa la fecha y hora actual
let currentDate = new Date();
console.log("Fecha actual:", currentDate);

// Crea un objeto Date con una fecha y hora específicas
let specificDate = new Date(2023, 5, 15, 10, 30, 0);
console.log("Fecha específica:", specificDate);

// Crea un objeto Date a partir de una cadena de fecha
let stringDate = new Date("2023-06-15");
console.log("Fecha a partir de cadena:", stringDate);

// Crea un objeto Date utilizando milisegundos desde la Época Unix
let millisecondDate = new Date(1686816000000);
console.log("Fecha a partir de milisegundos:", millisecondDate);

Salida de ejemplo:

Fecha actual: jueves 15 de junio de 2023 12:00:00 GMT+0000 (Tiempo Universal Coordinado)
Fecha específica: jueves 15 de junio de 2023 10:30:00 GMT+0000 (Tiempo Universal Coordinado)
Fecha a partir de cadena: jueves 15 de junio de 2023 00:00:00 GMT+0000 (Tiempo Universal Coordinado)
Fecha a partir de milisegundos: jueves 15 de junio de 2023 00:00:00 GMT+0000 (Tiempo Universal Coordinado)

Puntos claves para recordar:

new Date() crea un objeto Date con la fecha y hora actual
new Date(year, month, day, hours, minutes, seconds) permite crear una fecha específica
Los meses están indexados desde cero (0-11), por lo que junio está representado por 5
Puedes crear fechas a partir de cadenas o milisegundos desde la Época Unix (1 de enero de 1970)

Recuperar componentes de la fecha actual

En este paso, aprenderás cómo extraer componentes específicos de un objeto Date. A partir del paso anterior, usaremos el archivo dates.js para demostrar varios métodos para recuperar componentes de fecha y hora.

Abre el archivo ~/project/dates.js y agrega el siguiente código:

// Crea un objeto de fecha actual
let currentDate = new Date();

// Recupera los componentes de fecha individuales
let year = currentDate.getFullYear();
let month = currentDate.getMonth(); // 0-11 (0 = enero)
let day = currentDate.getDate(); // Día del mes
let hours = currentDate.getHours();
let minutes = currentDate.getMinutes();
let seconds = currentDate.getSeconds();
let milliseconds = currentDate.getMilliseconds();

// Muestra los componentes individuales
console.log("Año:", year);
console.log("Mes:", month + 1); // Suma 1 para mostrar el número real del mes
console.log("Día del mes:", day);
console.log("Horas:", hours);
console.log("Minutos:", minutes);
console.log("Segundos:", seconds);
console.log("Milisegundos:", milliseconds);

// Obtiene el día de la semana
let dayOfWeek = currentDate.getDay(); // 0-6 (0 = domingo)
console.log("Día de la semana:", dayOfWeek);

// Obtiene el timestamp (milisegundos desde la Época Unix)
let timestamp = currentDate.getTime();
console.log("Timestamp:", timestamp);

Salida de ejemplo:

Año: 2023
Mes: 6
Día del mes: 15
Horas: 12
Minutos: 30
Segundos: 45
Milisegundos: 123
Día de la semana: 4
Timestamp: 1686816045123

Puntos claves para recordar:

getFullYear() devuelve el año con cuatro dígitos
getMonth() devuelve un valor de 0 a 11, así que suma 1 para obtener el número real del mes
getDate() devuelve el día del mes (1-31)
getDay() devuelve el día de la semana (0-6)
getTime() devuelve los milisegundos desde el 1 de enero de 1970

Formatear y mostrar información de fecha

En este paso, aprenderás varios métodos para formatear y mostrar información de fecha en JavaScript. Abre el archivo ~/project/dates.js y agrega el siguiente código para explorar diferentes técnicas de formato:

// Crea un objeto de fecha actual
let currentDate = new Date();

// Método 1: Usando toLocaleDateString()
let localeDateString = currentDate.toLocaleDateString();
console.log("Cadena de fecha local:", localeDateString);

// Método 2: Usando toDateString()
let dateString = currentDate.toDateString();
console.log("Cadena de fecha:", dateString);

// Método 3: Usando toLocaleString()
let localeString = currentDate.toLocaleString();
console.log("Cadena local:", localeString);

// Método 4: Formato personalizado
let customFormat =
  `${currentDate.getFullYear()}-` +
  `${(currentDate.getMonth() + 1).toString().padStart(2, "0")}-` +
  `${currentDate.getDate().toString().padStart(2, "0")}`;
console.log("Formato personalizado:", customFormat);

// Método 5: API de internacionalización
let options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
};
let intlFormat = currentDate.toLocaleDateString("en-US", options);
console.log("Formato internacionalizado:", intlFormat);

Salida de ejemplo:

Cadena de fecha local: 15/6/2023
Cadena de fecha: jueves 15 de junio de 2023
Cadena local: 15/6/2023, 12:30:45 p. m.
Formato personalizado: 2023-06-15
Formato internacionalizado: jueves, 15 de junio de 2023

Puntos claves para recordar:

toLocaleDateString() proporciona una representación de fecha localizada
toDateString() da una cadena de fecha legible para humanos
toLocaleString() incluye tanto la fecha como la hora
El formato personalizado permite control preciso de la visualización de la fecha
La API de internacionalización ofrece opciones avanzadas de localización

Modificar la fecha utilizando métodos de configuración

En este paso, aprenderás cómo modificar los componentes de fecha utilizando los métodos de configuración del objeto Date de JavaScript. Abre el archivo ~/project/dates.js y agrega el siguiente código para explorar diferentes maneras de cambiar los valores de fecha:

// Crea un nuevo objeto Date
let modifiableDate = new Date();
console.log("Fecha original:", modifiableDate);

// Establece un año específico
modifiableDate.setFullYear(2024);
console.log("Después de establecer el año:", modifiableDate);

// Establece el mes (0-11, por lo que 5 representa junio)
modifiableDate.setMonth(5);
console.log("Después de establecer el mes:", modifiableDate);

// Establece el día del mes
modifiableDate.setDate(15);
console.log("Después de establecer el día:", modifiableDate);

// Establece las horas (0-23)
modifiableDate.setHours(14);
console.log("Después de establecer las horas:", modifiableDate);

// Establece los minutos (0-59)
modifiableDate.setMinutes(30);
console.log("Después de establecer los minutos:", modifiableDate);

// Establece los segundos (0-59)
modifiableDate.setSeconds(45);
console.log("Después de establecer los segundos:", modifiableDate);

// Encadenamiento de métodos de configuración
let customDate = new Date();
customDate.setFullYear(2025).setMonth(11).setDate(31);
console.log("Fecha personalizada:", customDate);

Salida de ejemplo:

Fecha original: jueves 15 de junio de 2023 12:30:45 GMT+0000
Después de establecer el año: jueves 15 de junio de 2024 12:30:45 GMT+0000
Después de establecer el mes: jueves 15 de junio de 2024 12:30:45 GMT+0000
Después de establecer el día: sábado 15 de junio de 2024 12:30:45 GMT+0000
Después de establecer las horas: sábado 15 de junio de 2024 14:30:45 GMT+0000
Después de establecer los minutos: sábado 15 de junio de 2024 14:30:45 GMT+0000
Después de establecer los segundos: sábado 15 de junio de 2024 14:30:45 GMT+0000
Fecha personalizada: miércoles 31 de diciembre de 2025 00:00:00 GMT+0000

Puntos claves para recordar:

Los métodos de configuración permiten la modificación precisa de los componentes de fecha
Los meses están indexados desde cero (0-11)
Las horas utilizan el formato de 24 horas (0-23)
Los métodos de configuración modifican el objeto Date original
Puedes encadenar algunos métodos de configuración para mayor conveniencia

Realizar cálculos de fechas

En este paso, aprenderás cómo realizar varios cálculos de fechas utilizando los métodos del objeto Date de JavaScript. Abre el archivo ~/project/dates.js y agrega el siguiente código para explorar diferentes técnicas de manipulación de fechas:

// Crea objetos de fecha para los cálculos
let currentDate = new Date();
let futureDate = new Date(currentDate.getTime());

// Agrega días a una fecha
futureDate.setDate(currentDate.getDate() + 30);
console.log("Fecha actual:", currentDate);
console.log("30 días después:", futureDate);

// Calcula la diferencia entre fechas
let differenceInMilliseconds = futureDate.getTime() - currentDate.getTime();
let differenceInDays = Math.floor(
  differenceInMilliseconds / (1000 * 60 * 60 * 24)
);
console.log("Días entre las fechas:", differenceInDays);

// Calcula la edad o el tiempo transcurrido
let birthDate = new Date("1990-01-01");
let ageInMilliseconds = currentDate.getTime() - birthDate.getTime();
let ageInYears = Math.floor(ageInMilliseconds / (1000 * 60 * 60 * 24 * 365.25));
console.log("Edad calculada:", ageInYears);

// Encuentra el último día del mes actual
let lastDayOfMonth = new Date(
  currentDate.getFullYear(),
  currentDate.getMonth() + 1,
  0
);
console.log("Último día del mes actual:", lastDayOfMonth);

// Verifica si un año es bisiesto
function isLeapYear(year) {
  return new Date(year, 1, 29).getMonth() === 1;
}
console.log("¿Es 2024 un año bisiesto?", isLeapYear(2024));

Salida de ejemplo:

Fecha actual: jueves 15 de junio de 2023 12:30:45 GMT+0000
30 días después: sábado 15 de julio de 2023 12:30:45 GMT+0000
Días entre las fechas: 30
Edad calculada: 33
Último día del mes actual: miércoles 30 de junio de 2023 00:00:00 GMT+0000
¿Es 2024 un año bisiesto? true

Puntos claves para recordar:

Utiliza getTime() para obtener los milisegundos para los cálculos
Convierte los milisegundos a días dividiendo adecuadamente
Puedes sumar o restar días utilizando setDate()
Calcula la edad o las diferencias de tiempo entre fechas
Verifica los años bisiestos probando el 29 de febrero

Resumen

En este laboratorio, los participantes aprendieron cómo manipular fechas utilizando el objeto Date de JavaScript a través de una exploración exhaustiva de las técnicas de creación, recuperación y manipulación de fechas. El laboratorio cubrió múltiples enfoques para inicializar objetos Date, incluyendo la creación de fechas que representan el momento actual, la especificación de fechas exactas con parámetros, el análisis de fechas a partir de cadenas y la generación de fechas a partir de timestamps en milisegundos.

Los ejercicios prácticos demostraron habilidades clave para manejar fechas en JavaScript, como la extracción de componentes de fecha específicos, el formateo de información de fecha, la aplicación de métodos de configuración para modificar fechas y la realización de cálculos de fechas. Los participantes adquirieron experiencia práctica con representaciones de meses indexadas desde cero, comprendiendo diferentes estrategias de inicialización de objetos Date y aprovechando los métodos integrados de JavaScript para trabajar efectivamente con datos temporales en una variedad de escenarios de programación.