Trabajo con fechas y horas en TypeScript: guía completa

Trabajo con fechas y horas en TypeScript: desde lo básico hasta técnicas avanzadas

La gestión de fechas y horas es una de las tareas clave en el desarrollo web. Ya sea para mostrar la hora de publicación, calcular plazos o sincronizar datos con el servidor, TypeScript proporciona herramientas potentes para trabajar con marcas de tiempo. En este artículo analizaremos todos los aspectos del trabajo con fechas: desde la creación del objeto Date hasta manipulaciones complejas con zonas horarias y formato.

1. Fundamentos del trabajo con el objeto Date en TypeScript

En TypeScript, al igual que en JavaScript, el objeto incorporado Date se encarga del trabajo con fechas. Gracias al tipado estricto, TypeScript ayuda a evitar errores al pasar datos incorrectos.

Creación del objeto Date

Existen varias formas de crear una instancia de fecha:

// Fecha y hora actualesconst now: Date = new Date();console.log(now); // Tue Oct 24 2023 14:30:00 GMT+0300

// Por milisegundos (Unix timestamp)const fromTimestamp: Date = new Date(1698153000000);

// Desde una cadena (ISO 8601)const fromString: Date = new Date("2023-10-24T12:00:00Z");

// Desde componentes (año, mes, día, horas, minutos, segundos)const customDate: Date = new Date(2023, 9, 24, 14, 30, 0); // ¡Los meses van de 0 a 11!

Importante: Los meses en JavaScript/TypeScript se numeran desde 0 (enero — 0, diciembre — 11). Esta es una causa frecuente de errores.

Obtención de componentes de la fecha

Para extraer partes individuales de la fecha se utilizan getters:

const date: Date = new Date();const year: number = date.getFullYear();      // 2023const month: number = date.getMonth();         // 9 (octubre)const day: number = date.getDate();            // 24const hours: number = date.getHours();         // 14const minutes: number = date.getMinutes();     // 30const seconds: number = date.getSeconds();     // 0const dayOfWeek: number = date.getDay();       // 2 (martes, 0 - domingo)

2. Formateo y visualización de fechas

La salida estándar de Date.toString() a menudo no es adecuada para interfaces de usuario. Veamos los métodos principales de formateo.

Métodos de formateo incorporados

• toDateString() — "Tue Oct 24 2023"
• toLocaleDateString() — fecha localizada (ej., "24.10.2023" para España)
• toISOString() — cadena en formato ISO ("2023-10-24T11:30:00.000Z")

const date: Date = new Date();console.log(date.toLocaleDateString('es-ES')); // 24/10/2023console.log(date.toLocaleTimeString('es-ES')); // 14:30:00

Formateo personalizado con Intl.DateTimeFormat

Para un control más flexible, use Intl.DateTimeFormat:

const date: Date = new Date();const formatter = new Intl.DateTimeFormat('es-ES', {    year: 'numeric',    month: 'long',    day: 'numeric',    weekday: 'long',    hour: '2-digit',    minute: '2-digit'});console.log(formatter.format(date)); // "martes, 24 de octubre de 2023, 14:30"

Biblioteca date-fns

Para tareas complejas, se recomienda usar la biblioteca date-fns. Es ligera y tiene excelente soporte para TypeScript:

import { format, addDays, isWeekend } from 'date-fns';import { es } from 'date-fns/locale';

const date: Date = new Date();console.log(format(date, 'dd.MM.yyyy', { locale: es })); // "24.10.2023"console.log(format(date, 'HH:mm:ss')); // "14:30:00"console.log(isWeekend(date)); // false

3. Manipulación de fechas: suma, resta y comparación

Modificación de la fecha

La forma más sencilla es usar setters:

const date: Date = new Date();date.setFullYear(2024);date.setMonth(11); // diciembredate.setDate(31);console.log(date); // "Tue Dec 31 2024 14:30