How to display time zone names like PST or Pacific Standard Time

Introduction

When you display a time to users, showing the time zone helps them understand whether the time is in their local zone or a different one. A meeting scheduled for 3:00 PM PST tells the user they need to convert from Pacific time. Without the PST label, the user must guess which time zone applies.

Time zones can appear in multiple formats. You can show abbreviated names like PST, full names like Pacific Standard Time, or offset-based formats like GMT-8. Different formats serve different purposes. Abbreviations save space but can be ambiguous. Full names are clear but take more room. Offsets work when the specific zone name is less important than the hour difference.

JavaScript provides the Intl.DateTimeFormat API to display time zone names automatically. This lesson explains what time zone names are, how they change between standard and daylight saving time, and how to display them in different formats.

Understanding time zone name formats

Time zone names appear in several distinct formats, each with different characteristics.

Short names use abbreviations like PST, EST, or JST. These save space but can be ambiguous. CST could mean Central Standard Time in North America, China Standard Time, or Cuba Standard Time.

Long names spell out the full time zone name like Pacific Standard Time, Eastern Standard Time, or Japan Standard Time. These avoid ambiguity but take more space.

Generic names refer to the time zone without specifying whether it is currently observing standard or daylight saving time. PT means Pacific Time, which could be either PST or PDT depending on the date.

Offset formats show the hour difference from UTC. GMT-8 means 8 hours behind Greenwich Mean Time. GMT-05:00 means 5 hours behind with a colon separating hours and minutes.

The format you choose depends on your use case. Use short names when space is limited and ambiguity is acceptable. Use long names when clarity matters more than space. Use offsets when you need to show the numeric relationship to UTC.

Using Intl.DateTimeFormat to display time zone names

The Intl.DateTimeFormat constructor accepts a timeZoneName option that controls how time zone names appear in formatted dates and times.

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"

This creates a formatter for US English that displays the time in the America/Los_Angeles time zone. The timeZoneName: 'short' option adds the abbreviated time zone name to the output. The result includes PST at the end.

The timeZone option sets which time zone to use when formatting. The timeZoneName option controls whether and how to display the time zone name. These two options work together. The timeZone determines the conversion, while timeZoneName determines the label.

Displaying short time zone names

The timeZoneName: 'short' option displays abbreviated time zone names.

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"

The short format produces EST for Eastern Standard Time. This format is compact and works well in tables, lists, or other space-constrained layouts.

Different time zones produce different abbreviations.

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

Each time zone produces its standard abbreviation. Pacific uses PST, Central uses CST, Eastern uses EST, London uses GMT, and Tokyo uses JST.

Displaying long time zone names

The timeZoneName: 'long' option displays full time zone names.

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"

The long format produces Pacific Standard Time instead of PST. This removes ambiguity but takes significantly more space.

Long names work well when clarity is essential and space is available.

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"

The full name makes it clear which time zone applies without requiring the user to decode an abbreviation.

Displaying time zone offsets

The timeZoneName: 'shortOffset' option displays the UTC offset in a compact format.

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"

This displays GMT-8 to indicate the time zone is 8 hours behind UTC. The offset format works well when the specific time zone name is less important than the numeric relationship to UTC.

The timeZoneName: 'longOffset' option displays the offset with hours and minutes.

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"

This displays GMT-08:00 with a colon between hours and minutes. This format is more precise and follows ISO 8601 conventions.

Time zones with half-hour or 45-minute offsets show the full offset in long format.

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"

India Standard Time has a 5 hour 30 minute offset from UTC. The long offset format displays this as GMT+05:30.

Displaying generic time zone names

The timeZoneName: 'shortGeneric' option displays a generic abbreviation that applies regardless of whether daylight saving time is active.

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"

Both winter and summer dates display PT for Pacific Time. The generic format does not distinguish between Pacific Standard Time and Pacific Daylight Time. This works when you want a consistent label regardless of the season.

The timeZoneName: 'longGeneric' option provides the full generic name.

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"

This displays Pacific Time instead of Pacific Standard Time. The generic long format provides clarity without specifying standard or daylight time.

How daylight saving time affects time zone names

Time zone names change between standard time and daylight saving time. The timeZoneName option reflects this change automatically.

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"

In January, the formatter displays PST for Pacific Standard Time. In July, it displays PDT for Pacific Daylight Time. The formatter automatically selects the correct name based on the date.

The offset also changes between standard and daylight time.

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"

In winter, Pacific Time is GMT-8. In summer, it is GMT-7. The offset changes by one hour when daylight saving time begins.

Long names also reflect the change.

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"

The long format changes from Pacific Standard Time to Pacific Daylight Time. The formatter handles these transitions automatically based on the date and time zone.

Displaying time zone names in different languages

Time zone names appear differently in different languages. The locale identifier determines which language the formatter uses for time zone names.

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"

English displays Pacific Standard Time. Spanish displays hora estándar del Pacífico. French displays heure normale du Pacifique. Each language uses its own translation for the time zone name.

Short names often remain the same across languages because they are abbreviations.

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"

Both English and Spanish use PST for the short abbreviation. However, Spanish omits the AM indicator in this example because Spanish formatting conventions differ from English.

Offsets remain numeric across all languages.

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"

Both English and Japanese display GMT-08:00 for the offset. Numeric offsets do not require translation.

Displaying only the time zone name

You can display only the time zone name by omitting other date and time components.

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"

When you specify only timeZoneName without other options, the formatter outputs only the time zone name. This works when you need to display the time zone separately from the date and time.

You can use this to create labels or legends.

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 (or Pacific Daylight Time depending on date)
// Central Standard Time (or Central Daylight Time depending on date)
// Eastern Standard Time (or Eastern Daylight Time depending on date)
// Greenwich Mean Time (or British Summer Time depending on date)
// Japan Standard Time

This creates a list of time zone names suitable for display in a dropdown menu or selection interface.

Combining time zone names with specific date formats

You can combine time zone names with specific date and time formatting options.

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"

This combines a full date format with the short time zone name. The output includes the weekday, full month name, day, year, time, and time zone abbreviation.

You can use this to create complete datetime displays.

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"

Note that the timeZoneName option cannot be used together with dateStyle or timeStyle. If you need to use style shortcuts, the time zone name is already included in the long and full time styles.

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"

The long time style automatically includes the short time zone name. You do not need to specify timeZoneName separately.

Displaying time zone names for event schedules

Time zone names help users understand when events occur across different regions.

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

Each event displays with its local time zone. Users can see that the Kickoff Meeting is at 9:00 AM Eastern, the Design Review is at 9:00 AM Pacific, and Sprint Planning is at 10:00 AM Japan time.

You can also show the same event in multiple time zones.

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

This shows a single meeting time converted to multiple time zones. Team members in different regions can find their local time quickly.