Cómo mostrar nombres de zonas horarias como PST o Pacific Standard Time

Introducción

Cuando muestras una hora a los usuarios, mostrar la zona horaria les ayuda a entender si la hora está en su zona local o en una diferente. Una reunión programada para las 3:00 PM PST le indica al usuario que necesita convertir desde la hora del Pacífico. Sin el indicador PST, el usuario debe adivinar qué zona horaria aplica.

Las zonas horarias pueden aparecer en múltiples formatos. Puedes mostrar nombres abreviados como PST, nombres completos como Pacific Standard Time, o formatos basados en desplazamiento como GMT-8. Diferentes formatos sirven para diferentes propósitos. Las abreviaturas ahorran espacio pero pueden ser ambiguas. Los nombres completos son claros pero ocupan más espacio. Los desplazamientos funcionan cuando el nombre específico de la zona es menos importante que la diferencia horaria.

JavaScript proporciona la API Intl.DateTimeFormat para mostrar nombres de zonas horarias automáticamente. Esta lección explica qué son los nombres de zonas horarias, cómo cambian entre el horario estándar y el horario de verano, y cómo mostrarlos en diferentes formatos.

Entendiendo los formatos de nombres de zonas horarias

Los nombres de zonas horarias aparecen en varios formatos distintos, cada uno con diferentes características.

Los nombres cortos utilizan abreviaturas como PST, EST, o JST. Estos ahorran espacio pero pueden ser ambiguos. CST podría significar Central Standard Time en Norteamérica, China Standard Time, o Cuba Standard Time.

Los nombres largos deletrean el nombre completo de la zona horaria como Pacific Standard Time, Eastern Standard Time, o Japan Standard Time. Estos evitan la ambigüedad pero ocupan más espacio.

Los nombres genéricos se refieren a la zona horaria sin especificar si actualmente está observando el horario estándar o el horario de verano. PT significa Pacific Time, que podría ser PST o PDT dependiendo de la fecha.

Los formatos de desplazamiento muestran la diferencia horaria desde UTC. GMT-8 significa 8 horas detrás del Greenwich Mean Time. GMT-05:00 significa 5 horas detrás con dos puntos separando horas y minutos.

El formato que elijas depende de tu caso de uso. Usa nombres cortos cuando el espacio es limitado y la ambigüedad es aceptable. Usa nombres largos cuando la claridad importa más que el espacio. Usa desplazamientos cuando necesites mostrar la relación numérica con UTC.

Uso de Intl.DateTimeFormat para mostrar nombres de zonas horarias

El constructor Intl.DateTimeFormat acepta una opción timeZoneName que controla cómo aparecen los nombres de zonas horarias en fechas y horas formateadas.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 7:30 AM PST"

Esto crea un formateador para inglés estadounidense que muestra la hora en la zona horaria America/Los_Angeles. La opción timeZoneName: 'short' añade el nombre abreviado de la zona horaria a la salida. El resultado incluye PST al final.

La opción timeZone establece qué zona horaria usar al formatear. La opción timeZoneName controla si se muestra y cómo se muestra el nombre de la zona horaria. Estas dos opciones trabajan juntas. El timeZone determina la conversión, mientras que timeZoneName determina la etiqueta.

Mostrar nombres cortos de zonas horarias

La opción timeZoneName: 'short' muestra nombres abreviados de zonas horarias.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 10:30 AM EST"

El formato corto produce EST para Eastern Standard Time (Hora Estándar del Este). Este formato es compacto y funciona bien en tablas, listas u otros diseños con espacio limitado.

Diferentes zonas horarias producen diferentes abreviaturas.

const date = new Date('2025-01-15T15:30:00Z');

const formatters = [
  { timeZone: 'America/Los_Angeles', name: 'Pacific' },
  { timeZone: 'America/Chicago', name: 'Central' },
  { timeZone: 'America/New_York', name: 'Eastern' },
  { timeZone: 'Europe/London', name: 'London' },
  { timeZone: 'Asia/Tokyo', name: 'Tokyo' }
];

formatters.forEach(({ timeZone, name }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${name}: ${formatter.format(date)}`);
});
// Output:
// Pacific: 7:30 AM PST
// Central: 9:30 AM CST
// Eastern: 10:30 AM EST
// London: 3:30 PM GMT
// Tokyo: 12:30 AM JST

Cada zona horaria produce su abreviatura estándar. El Pacífico usa PST, el Central usa CST, el Este usa EST, Londres usa GMT y Tokio usa JST.

Mostrando nombres de zona horaria largos

La opción timeZoneName: 'long' muestra los nombres completos de las zonas horarias.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "1/15/2025, 7:30 AM Pacific Standard Time"

El formato largo produce Pacific Standard Time en lugar de PST. Esto elimina la ambigüedad pero ocupa significativamente más espacio.

Los nombres largos funcionan bien cuando la claridad es esencial y hay espacio disponible.

const date = new Date('2025-01-15T15:30:00Z');

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(formatter.format(date));
// Output: "10:30 AM Eastern Standard Time"

El nombre completo deja claro qué zona horaria se aplica sin requerir que el usuario decodifique una abreviatura.

Mostrando desplazamientos de zona horaria

La opción timeZoneName: 'shortOffset' muestra el desplazamiento UTC en un formato compacto.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM GMT-8"

Esto muestra GMT-8 para indicar que la zona horaria está 8 horas por detrás de UTC. El formato de desplazamiento funciona bien cuando el nombre específico de la zona horaria es menos importante que la relación numérica con UTC.

La opción timeZoneName: 'longOffset' muestra el desplazamiento con horas y minutos.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM GMT-08:00"

Esto muestra GMT-08:00 con dos puntos entre horas y minutos. Este formato es más preciso y sigue las convenciones ISO 8601.

Las zonas horarias con desplazamientos de media hora o 45 minutos muestran el desplazamiento completo en formato largo.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'Asia/Kolkata',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "9:00 PM GMT+05:30"

La hora estándar de la India tiene un desplazamiento de 5 horas y 30 minutos desde UTC. El formato de desplazamiento largo muestra esto como GMT+05:30.

Mostrar nombres genéricos de zonas horarias

La opción timeZoneName: 'shortGeneric' muestra una abreviatura genérica que se aplica independientemente de si el horario de verano está activo.

const winterFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const summerFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(winterFormatter.format(winterDate));
// Output: "7:30 AM PT"

console.log(summerFormatter.format(summerDate));
// Output: "8:30 AM PT"

Tanto las fechas de invierno como las de verano muestran PT para la hora del Pacífico. El formato genérico no distingue entre la hora estándar del Pacífico y la hora de verano del Pacífico. Esto funciona cuando se desea una etiqueta consistente independientemente de la temporada.

La opción timeZoneName: 'longGeneric' proporciona el nombre genérico completo.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "7:30 AM Pacific Time"

Esto muestra Pacific Time en lugar de Pacific Standard Time. El formato genérico largo proporciona claridad sin especificar la hora estándar o de verano.

Cómo el horario de verano afecta a los nombres de zonas horarias

Los nombres de las zonas horarias cambian entre la hora estándar y el horario de verano. La opción timeZoneName refleja este cambio automáticamente.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM PST"

console.log(formatter.format(summerDate));
// Output: "8:30 AM PDT"

En enero, el formateador muestra PST para la hora estándar del Pacífico. En julio, muestra PDT para la hora de verano del Pacífico. El formateador selecciona automáticamente el nombre correcto según la fecha.

El desplazamiento también cambia entre la hora estándar y la hora de verano.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM GMT-8"

console.log(formatter.format(summerDate));
// Output: "8:30 AM GMT-7"

En invierno, la hora del Pacífico es GMT-8. En verano, es GMT-7. El desplazamiento cambia en una hora cuando comienza el horario de verano.

Los nombres largos también reflejan el cambio.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// Output: "7:30 AM Pacific Standard Time"

console.log(formatter.format(summerDate));
// Output: "8:30 AM Pacific Daylight Time"

El formato largo cambia de Pacific Standard Time a Pacific Daylight Time. El formateador maneja estas transiciones automáticamente según la fecha y la zona horaria.

Mostrar nombres de zonas horarias en diferentes idiomas

Los nombres de las zonas horarias aparecen de manera diferente en distintos idiomas. El identificador de configuración regional determina qué idioma utiliza el formateador para los nombres de zonas horarias.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const frFormatter = new Intl.DateTimeFormat('fr-FR', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM Pacific Standard Time"

console.log(esFormatter.format(date));
// Output: "7:30 hora estándar del Pacífico"

console.log(frFormatter.format(date));
// Output: "07:30 heure normale du Pacifique"

El inglés muestra Pacific Standard Time. El español muestra hora estándar del Pacífico. El francés muestra heure normale du Pacifique. Cada idioma utiliza su propia traducción para el nombre de la zona horaria.

Los nombres cortos a menudo permanecen iguales en todos los idiomas porque son abreviaturas.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM PST"

console.log(esFormatter.format(date));
// Output: "7:30 PST"

Tanto el inglés como el español utilizan PST para la abreviatura corta. Sin embargo, el español omite el indicador AM en este ejemplo porque las convenciones de formato en español difieren del inglés.

Los desplazamientos permanecen numéricos en todos los idiomas.

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const jaFormatter = new Intl.DateTimeFormat('ja-JP', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// Output: "7:30 AM GMT-08:00"

console.log(jaFormatter.format(date));
// Output: "7:30 GMT-08:00"

Tanto el inglés como el japonés muestran GMT-08:00 para el desplazamiento. Los desplazamientos numéricos no requieren traducción.

Mostrar solo el nombre de la zona horaria

Puedes mostrar solo el nombre de la zona horaria omitiendo otros componentes de fecha y hora.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Pacific Standard Time"

Cuando especificas solo timeZoneName sin otras opciones, el formateador muestra únicamente el nombre de la zona horaria. Esto funciona cuando necesitas mostrar la zona horaria separada de la fecha y hora.

Puedes usar esto para crear etiquetas o leyendas.

const timeZones = [
  'America/Los_Angeles',
  'America/Chicago',
  'America/New_York',
  'Europe/London',
  'Asia/Tokyo'
];

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZoneName: 'long'
});

const date = new Date();

timeZones.forEach(timeZone => {
  formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'long'
  });
  console.log(formatter.format(date));
});
// Output:
// Pacific Standard Time (o Pacific Daylight Time dependiendo de la fecha)
// Central Standard Time (o Central Daylight Time dependiendo de la fecha)
// Eastern Standard Time (o Eastern Daylight Time dependiendo de la fecha)
// Greenwich Mean Time (o British Summer Time dependiendo de la fecha)
// Japan Standard Time

Esto crea una lista de nombres de zonas horarias adecuada para mostrar en un menú desplegable o interfaz de selección.

Combinar nombres de zonas horarias con formatos de fecha específicos

Puedes combinar nombres de zonas horarias con opciones específicas de formato de fecha y hora.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025, 10:30 AM EST"

Esto combina un formato de fecha completo con el nombre corto de la zona horaria. El resultado incluye el día de la semana, nombre completo del mes, día, año, hora y abreviatura de la zona horaria.

Puedes usar esto para crear visualizaciones completas de fecha y hora.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025 at 7:30:00 AM Pacific Standard Time"

Ten en cuenta que la opción timeZoneName no puede usarse junto con dateStyle o timeStyle. Si necesitas usar atajos de estilo, el nombre de la zona horaria ya está incluido en los estilos de tiempo long y full.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// Output: "Wednesday, January 15, 2025 at 7:30:00 AM PST"

El estilo de tiempo long incluye automáticamente el nombre corto de la zona horaria. No necesitas especificar timeZoneName por separado.

Mostrar nombres de zonas horarias para programaciones de eventos

Los nombres de zonas horarias ayudan a los usuarios a entender cuándo ocurren los eventos en diferentes regiones.

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZoneName: 'short',
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const events = [
  { name: 'Kickoff Meeting', time: '2025-03-15T14:00:00Z', timeZone: 'America/New_York' },
  { name: 'Design Review', time: '2025-03-15T17:00:00Z', timeZone: 'America/Los_Angeles' },
  { name: 'Sprint Planning', time: '2025-03-16T01:00:00Z', timeZone: 'Asia/Tokyo' }
];

events.forEach(event => {
  const localFormatter = new Intl.DateTimeFormat('en-US', {
    timeZone: event.timeZone,
    timeZoneName: 'short',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric'
  });

  const date = new Date(event.time);
  console.log(`${event.name}: ${localFormatter.format(date)}`);
});
// Output:
// Kickoff Meeting: Mar 15, 9:00 AM EST
// Design Review: Mar 15, 9:00 AM PST
// Sprint Planning: Mar 16, 10:00 AM JST

Cada evento se muestra con su zona horaria local. Los usuarios pueden ver que la Reunión de Inicio es a las 9:00 AM hora del Este, la Revisión de Diseño es a las 9:00 AM hora del Pacífico, y la Planificación del Sprint es a las 10:00 AM hora de Japón.

También puedes mostrar el mismo evento en múltiples zonas horarias.

const meetingTime = new Date('2025-03-15T17:00:00Z');

const timeZones = [
  { zone: 'America/Los_Angeles', label: 'Pacific' },
  { zone: 'America/Chicago', label: 'Central' },
  { zone: 'America/New_York', label: 'Eastern' },
  { zone: 'Europe/London', label: 'London' }
];

console.log('Global Team Meeting:');
timeZones.forEach(({ zone, label }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: zone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${label}: ${formatter.format(meetingTime)}`);
});
// Output:
// Global Team Meeting:
// Pacific: 9:00 AM PST
// Central: 11:00 AM CST
// Eastern: 12:00 PM EST
// London: 5:00 PM GMT

Esto muestra un único horario de reunión convertido a múltiples zonas horarias. Los miembros del equipo en diferentes regiones pueden encontrar su hora local rápidamente.