Formato de fechas y horas
Muestre fechas con Intl.DateTimeFormat.
Formato de fechas y horas es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Intl.DateTimeFormat
Intl.DateTimeFormat formatea objetos Date según una configuración regional y evita tener que construir cadenas manualmente de forma propensa a errores.
const dtf = new Intl.DateTimeFormat("en-US");
console.log(dtf.format(new Date("2026-05-29"))); // "5/29/2026"Diferencias entre configuraciones regionales
El orden de la fecha varía según la región: en Estados Unidos es mes/día/año y en gran parte de Europa es día/mes/año.
const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US").format(d)); // 5/29/2026
console.log(new Intl.DateTimeFormat("en-GB").format(d)); // 29/05/2026Preajustes de estilo de fecha
dateStyle ofrece los preajustes "full", "long", "medium" y "short" para obtener rápidamente resultados legibles.
const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(d));
// "Friday, May 29, 2026"Estilo de hora
timeStyle funciona de la misma manera para la parte de la hora y se puede combinar con dateStyle.
const d = new Date("2026-05-29T14:30:00");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short" }).format(d));
// "May 29, 2026, 2:30 PM"Opciones de componentes personalizados
Para un control más preciso, especifique por separado componentes como year, month, day y weekday.
const d = new Date("2026-05-29");
const f = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
console.log(f.format(d)); // "Friday, May 29, 2026"Formatos de mes
month acepta "numeric", "2-digit", "short", "long" y "narrow".
const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { month: "long" }).format(d)); // "May"
console.log(new Intl.DateTimeFormat("en-US", { month: "short" }).format(d)); // "May"Reloj de 12 o 24 horas
hour12: true/false reemplaza el formato de reloj predeterminado de la configuración regional.
const d = new Date("2026-05-29T20:05:00");
console.log(new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12: false }).format(d));
// "20:05"Zonas horarias
Pase un nombre IANA de timeZone para mostrar una fecha en cualquier zona, independientemente de la zona local del entorno de ejecución.
const d = new Date("2026-05-29T12:00:00Z");
console.log(new Intl.DateTimeFormat("en-US", { timeStyle: "long", timeZone: "Asia/Tokyo" }).format(d));formatToParts
formatToParts devuelve una matriz de tokens tipados, lo que permite aplicar estilos o cambiar de orden cada parte.
const parts = new Intl.DateTimeFormat("en-US").formatToParts(new Date("2026-05-29"));
console.log(parts.map((p) => p.type + ":" + p.value).join(" "));Formatear intervalos
formatRange(start, end) muestra un intervalo de fechas de forma compacta y combina los componentes compartidos.
const f = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" });
console.log(f.formatRange(new Date("2026-05-01"), new Date("2026-05-05")));
// "May 1 – 5"Calendarios no gregorianos
La opción calendar admite sistemas como "islamic", "hebrew" o "japanese".
const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { calendar: "japanese", dateStyle: "long" }).format(d));Comprobación rápida
Pruebe el formato de fechas.
Repaso: fechas y horas
Ha formateado fechas y horas con Intl.DateTimeFormat, ha utilizado los preajustes dateStyle/timeStyle y opciones detalladas para los componentes, y ha gestionado zonas horarias, relojes de 12 y 24 horas, formatToParts, intervalos y calendarios alternativos. A continuación: tiempo relativo y plurales.
Preguntas frecuentes
¿La lección «Formato de fechas y horas» es gratis?
Sí — el texto completo de «Formato de fechas y horas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Formato de fechas y horas»?
Muestre fechas con Intl.DateTimeFormat. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Formato de fechas y horas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Formato de números y monedas
- Formato de fechas y horas
- Tiempo relativo y plurales
- Ordenación según la configuración regional