Cómo formatear fechas como cortas, medianas, largas o completas
Usa estilos predefinidos de fecha y hora para controlar el nivel de detalle del formato sin configurar componentes individuales
Introducción
Formatear fechas requiere elegir qué componentes mostrar y cómo mostrarlos. Puedes mostrar el día de la semana, el nombre del mes, el número del día, el año, las horas, los minutos y la zona horaria. Cada componente tiene sus propias opciones de formato. Configurar todas estas opciones individualmente crea código verboso y requiere comprender qué combinaciones funcionan bien juntas.
El Intl.DateTimeFormat de JavaScript proporciona estilos predefinidos que agrupan opciones de formato comunes en opciones simples. En lugar de especificar que quieres un mes numérico, un día numérico y un año numérico, puedes solicitar dateStyle: "short". En lugar de configurar la visualización de hora, minuto y segundo, puedes solicitar timeStyle: "medium".
Estos preajustes funcionan en todas las configuraciones regionales. El mismo estilo produce una salida apropiada ya sea que estés formateando para inglés estadounidense, alemán, japonés o árabe. Esta lección explica qué proporciona cada nivel de estilo y cuándo usar cada uno.
Qué son dateStyle y timeStyle
La opción dateStyle controla cómo aparecen las fechas. Afecta qué componentes de fecha se muestran y qué tan detallados son. La opción acepta cuatro valores: "short", "medium", "long" y "full".
La opción timeStyle controla cómo aparecen las horas. Afecta qué componentes de tiempo se muestran y qué tan detallados son. La opción acepta los mismos cuatro valores: "short", "medium", "long" y "full".
Ambas opciones proporcionan atajos para configurar múltiples opciones de formato a la vez. Cuando especificas un estilo, el formateador selecciona automáticamente valores apropiados para componentes como día de la semana, mes, día, año, hora, minuto, segundo y nombre de zona horaria según la configuración regional.
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "short"
});
console.log(formatter.format(new Date("2025-03-15")));
// Output: "3/15/25"
Esta única opción reemplaza lo que de otro modo requeriría configurar múltiples opciones de componentes individuales.
Comprender los cuatro niveles de estilo
Cada nivel de estilo representa un equilibrio diferente entre brevedad y detalle. Los estilos cortos minimizan el espacio omitiendo componentes y usando formatos numéricos. Los estilos completos maximizan la claridad incluyendo todos los componentes relevantes y escribiendo las palabras completas.
El estilo "short" produce una salida compacta adecuada para espacios reducidos. Normalmente usa formatos numéricos y omite información complementaria como nombres de días de la semana.
El estilo "medium" proporciona un nivel moderado de detalle. A menudo incluye nombres de meses abreviados y una precisión temporal equilibrada.
El estilo "long" añade más contexto. Normalmente escribe los nombres de los meses completos e incluye componentes adicionales como información de zona horaria.
El estilo "full" produce la representación más completa. Incluye todos los componentes relevantes como nombres de días de la semana, nombres completos de meses y nombres completos de zonas horarias.
Los componentes exactos y el formato de cada estilo varían según la configuración regional. El inglés americano puede mostrar los meses de manera diferente al alemán o al japonés, pero el nivel de detalle relativo se mantiene consistente entre las configuraciones regionales.
Formatear fechas con dateStyle
La opción dateStyle controla el formato de fecha. Cada nivel de estilo produce una salida diferente para la misma fecha.
const date = new Date("2025-03-15T14:30:00");
const shortFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "short"
});
const mediumFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "medium"
});
const longFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long"
});
const fullFormatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "full"
});
console.log(shortFormatter.format(date));
// Output: "3/15/25"
console.log(mediumFormatter.format(date));
// Output: "Mar 15, 2025"
console.log(longFormatter.format(date));
// Output: "March 15, 2025"
console.log(fullFormatter.format(date));
// Output: "Saturday, March 15, 2025"
El estilo corto usa todos los valores numéricos, haciéndolo el más compacto. El estilo medio abrevia el nombre del mes. El estilo largo escribe el mes completo. El estilo completo añade el nombre del día de la semana para un contexto completo.
Formatear horas con timeStyle
La opción timeStyle controla el formato de hora. Cada nivel de estilo muestra diferentes componentes de tiempo.
const date = new Date("2025-03-15T14:30:45");
const shortFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "short"
});
const mediumFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "medium"
});
const longFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "long"
});
const fullFormatter = new Intl.DateTimeFormat("en-US", {
timeStyle: "full"
});
console.log(shortFormatter.format(date));
// Output: "2:30 PM"
console.log(mediumFormatter.format(date));
// Output: "2:30:45 PM"
console.log(longFormatter.format(date));
// Output: "2:30:45 PM PST"
console.log(fullFormatter.format(date));
// Output: "2:30:45 PM Pacific Standard Time"
El estilo corto muestra solo horas y minutos. El estilo medio añade segundos. El estilo largo incluye la zona horaria abreviada. El estilo completo escribe el nombre completo de la zona horaria.
Combinar dateStyle y timeStyle
Puedes usar ambas opciones juntas para formatear marcas de tiempo completas. El formateador aplica ambos estilos de forma independiente.
const date = new Date("2025-03-15T14:30:45");
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
timeStyle: "short"
});
console.log(formatter.format(date));
// Output: "March 15, 2025 at 2:30 PM"
La fecha aparece con formato largo mientras que la hora usa formato corto. Esta combinación proporciona contexto detallado de la fecha mientras mantiene la hora concisa.
Puedes mezclar cualquier estilo de fecha con cualquier estilo de hora según tus necesidades.
const date = new Date("2025-03-15T14:30:45");
const combinations = [
{ dateStyle: "short", timeStyle: "short" },
{ dateStyle: "medium", timeStyle: "medium" },
{ dateStyle: "long", timeStyle: "long" },
{ dateStyle: "full", timeStyle: "full" }
];
combinations.forEach(options => {
const formatter = new Intl.DateTimeFormat("en-US", options);
console.log(formatter.format(date));
});
// Output:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"
Usar niveles de estilo coincidentes produce un nivel de detalle consistente tanto en la fecha como en la hora. Mezclar estilos te permite enfatizar un aspecto sobre el otro.
Cómo varían los estilos de fecha según la configuración regional
Cada configuración regional formatea las fechas según sus propias convenciones. El mismo estilo produce resultados diferentes para distintas configuraciones regionales, pero el nivel de detalle relativo se mantiene consistente.
const date = new Date("2025-03-15T14:30:00");
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
locales.forEach(locale => {
const shortFormatter = new Intl.DateTimeFormat(locale, {
dateStyle: "short"
});
const fullFormatter = new Intl.DateTimeFormat(locale, {
dateStyle: "full"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(date)}`);
console.log(` Full: ${fullFormatter.format(date)}`);
});
// Output:
// en-US:
// Short: 3/15/25
// Full: Saturday, March 15, 2025
// de-DE:
// Short: 15.03.25
// Full: Samstag, 15. März 2025
// fr-FR:
// Short: 15/03/2025
// Full: samedi 15 mars 2025
// ja-JP:
// Short: 2025/03/15
// Full: 2025年3月15日土曜日
El inglés americano usa el orden mes/día/año. El alemán usa día.mes.año con puntos como separadores. El francés usa día/mes/año. El japonés usa año/mes/día con caracteres kanji. El estilo completo añade nombres de días de la semana en cada idioma con el formato apropiado.
Cómo varían los estilos de hora según la configuración regional
El formato de hora también se adapta a las convenciones regionales. Algunas configuraciones regionales usan relojes de 12 horas con indicadores AM/PM, mientras que otras usan relojes de 24 horas.
const date = new Date("2025-03-15T14:30:45");
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
locales.forEach(locale => {
const shortFormatter = new Intl.DateTimeFormat(locale, {
timeStyle: "short"
});
const longFormatter = new Intl.DateTimeFormat(locale, {
timeStyle: "long"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(date)}`);
console.log(` Long: ${longFormatter.format(date)}`);
});
// Output:
// en-US:
// Short: 2:30 PM
// Long: 2:30:45 PM PST
// de-DE:
// Short: 14:30
// Long: 14:30:45 PST
// fr-FR:
// Short: 14:30
// Long: 14:30:45 UTC−8
// ja-JP:
// Short: 14:30
// Long: 14:30:45 PST
El inglés americano usa formato de 12 horas con AM/PM. El alemán, francés y japonés usan formato de 24 horas. El estilo largo añade información de zona horaria con el formato apropiado para cada configuración regional.
Cuándo usar el estilo corto
El estilo corto funciona mejor cuando el espacio es limitado o cuando las fechas necesitan ajustarse a diseños compactos. Las interfaces móviles, tablas de datos y pantallas compactas se benefician del formato de fecha mínimo.
Usa el estilo de fecha corto para mostrar fechas en columnas de tablas, elementos de lista o en cualquier lugar donde el espacio horizontal esté limitado. El formato numérico ocupa menos caracteres que los nombres de meses o días de la semana escritos.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "short"
});
const events = [
{ name: "Team meeting", date: new Date("2025-03-15") },
{ name: "Project deadline", date: new Date("2025-03-28") },
{ name: "Conference", date: new Date("2025-04-05") }
];
events.forEach(event => {
console.log(`${event.name}: ${formatter.format(event.date)}`);
});
Usa el estilo de hora corto para mostrar horas en horarios, calendarios o en cualquier lugar donde la precisión al segundo sea innecesaria. La mayoría de los contextos solo necesitan horas y minutos.
Cuándo usar el estilo medio
El estilo medio equilibra detalle y espacio. Proporciona más contexto que el estilo corto sin la verbosidad de los estilos largo o completo. Esto lo hace adecuado para la mayoría de las visualizaciones de fecha y hora de propósito general.
Usa el estilo de fecha medio cuando tengas espacio moderado y quieras que las fechas sean más legibles que los formatos puramente numéricos. Los nombres de mes abreviados ayudan a los usuarios a identificar los meses más rápidamente que los números.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "medium"
});
const milestone = new Date("2025-03-15");
console.log(`Project completion: ${formatter.format(milestone)}`);
// Output: "Project completion: Mar 15, 2025"
Usa el estilo de hora medio cuando necesites precisión de segundos pero quieras mantener las zonas horarias implícitas. Esto funciona para mostrar marcas de tiempo precisas en registros de aplicaciones o feeds de actividad donde los usuarios entienden el contexto de la zona horaria.
Cuándo usar el estilo largo
El estilo largo proporciona detalle adicional sin volverse tan verboso como el estilo completo. Deletrea la información completamente mientras omite componentes suplementarios como nombres de días de la semana.
Usa el estilo de fecha largo para fechas importantes que merecen énfasis o cuando quieras que las fechas se lean de forma más natural. Los nombres de mes completamente deletreados son más fáciles de escanear que las abreviaturas.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "long"
});
const releaseDate = new Date("2025-03-15");
console.log(`Release date: ${formatter.format(releaseDate)}`);
// Output: "Release date: March 15, 2025"
Usa el estilo de hora largo cuando la información de zona horaria importe. Esto ayuda a los usuarios a entender cuándo ocurrieron o ocurrirán los eventos en relación con su propia zona horaria.
const formatter = new Intl.DateTimeFormat(navigator.language, {
timeStyle: "long",
timeZone: "America/New_York"
});
const callTime = new Date("2025-03-15T14:30:00");
console.log(`Conference call: ${formatter.format(callTime)}`);
// Output: "Conference call: 2:30:45 PM EST"
Cuándo usar el estilo completo
El estilo completo produce la representación de fecha y hora más completa. Incluye todos los componentes relevantes, haciéndolo adecuado para contextos donde la claridad y la completitud importan más que la eficiencia de espacio.
Usa el estilo de fecha completo para mostrar fechas que necesitan el máximo contexto. Añadir el día de la semana ayuda a los usuarios a ubicar las fechas dentro del calendario semanal, lo cual es útil para programar, planificar y comprender las relaciones temporales.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "full"
});
const appointmentDate = new Date("2025-03-15");
console.log(`Appointment: ${formatter.format(appointmentDate)}`);
// Output: "Appointment: Saturday, March 15, 2025"
Usa el estilo de hora completo cuando muestres horas que necesitan el contexto completo de la zona horaria. Escribir el nombre completo de la zona horaria elimina la ambigüedad para los usuarios en diferentes regiones.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "full",
timeStyle: "full"
});
const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// Output: "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"
El estilo completo funciona bien para mostrar eventos importantes singulares, mensajes de confirmación o cualquier lugar donde los usuarios se beneficien de ver el contexto temporal completo.
Comprender las restricciones
Las opciones dateStyle y timeStyle no se pueden usar con opciones de componentes individuales. Debes elegir entre usar estilos preestablecidos o configurar los componentes individualmente.
Esto no funcionará:
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "medium",
weekday: "long" // Error: cannot combine
});
La opción dateStyle ya determina el formato del día de la semana. Añadir una opción explícita weekday crea un conflicto. La misma restricción se aplica a timeStyle con opciones de componentes como hour, minute o second.
Si necesitas más control sobre componentes específicos, omite las opciones de estilo y configura los componentes individualmente.
const formatter = new Intl.DateTimeFormat("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
});
console.log(formatter.format(new Date("2025-03-15")));
// Output: "Saturday, March 15, 2025"
Puedes usar dateStyle y timeStyle juntos porque controlan aspectos diferentes del formato. También puedes combinarlos con opciones que no entren en conflicto, como timeZone, calendar o numberingSystem.
const formatter = new Intl.DateTimeFormat("en-US", {
dateStyle: "long",
timeStyle: "long",
timeZone: "America/New_York"
});
console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Output: "March 15, 2025 at 2:30:45 PM EST"
Formatear fechas para la configuración regional del usuario
Usa las preferencias de idioma del navegador para formatear las fechas según las expectativas de cada usuario. La propiedad navigator.language proporciona la configuración regional preferida del usuario.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "long",
timeStyle: "short"
});
const date = new Date("2025-03-15T14:30:00");
console.log(formatter.format(date));
// Output varies by user's locale
// For en-US: "March 15, 2025 at 2:30 PM"
// For de-DE: "15. März 2025 um 14:30"
// For fr-FR: "15 mars 2025 à 14:30"
También puedes pasar el array completo de navigator.languages para habilitar el comportamiento de respaldo. El formateador usa la primera configuración regional que admite del array.
const formatter = new Intl.DateTimeFormat(navigator.languages, {
dateStyle: "medium"
});
Reutilizar formateadores para mejorar el rendimiento
Crear instancias de Intl.DateTimeFormat implica procesar datos de configuración regional y opciones. Cuando formatees múltiples fechas con la misma configuración, crea el formateador una vez y reutilízalo.
const formatter = new Intl.DateTimeFormat(navigator.language, {
dateStyle: "medium",
timeStyle: "short"
});
const events = [
new Date("2025-03-15T14:30:00"),
new Date("2025-03-16T10:00:00"),
new Date("2025-03-17T16:45:00")
];
events.forEach(date => {
console.log(formatter.format(date));
});
// Output:
// "Mar 15, 2025, 2:30 PM"
// "Mar 16, 2025, 10:00 AM"
// "Mar 17, 2025, 4:45 PM"
Este patrón mejora el rendimiento al formatear arrays de fechas o mostrar muchas marcas de tiempo en una interfaz de usuario.
Qué recordar
Las opciones dateStyle y timeStyle proporcionan niveles de formato predefinidos: "short", "medium", "long" y "full". Cada nivel representa un equilibrio diferente entre brevedad y detalle, siendo short el más compacto y full el más completo.
Usa estos estilos predefinidos en lugar de configurar manualmente los componentes individuales de fecha y hora. Los estilos predefinidos producen resultados apropiados para cada configuración regional sin que necesites comprender las reglas de formato específicas de cada región.
Puedes usar dateStyle y timeStyle juntos, pero no puedes combinarlos con opciones de componentes individuales como weekday o hour. Elige entre estilos predefinidos para mayor simplicidad o componentes individuales para un control más detallado.
Formatea las fechas usando la configuración regional del usuario desde navigator.language para mostrar las fechas según las expectativas de cada usuario. Reutiliza las instancias del formateador al formatear múltiples fechas para obtener un mejor rendimiento.