Как отображать названия часовых поясов, такие как PST или Pacific Standard Time

Введение

Когда вы отображаете время для пользователей, указание часового пояса помогает им понять, относится ли время к их местному часовому поясу или к другому. Встреча, запланированная на 3:00 PM PST, сообщает пользователю, что ему нужно преобразовать время из тихоокеанского времени. Без метки PST пользователю придется догадываться, какой часовой пояс применяется.

Часовые пояса могут отображаться в разных форматах. Вы можете использовать сокращенные названия, такие как PST, полные названия, такие как Pacific Standard Time, или форматы, основанные на смещении, такие как GMT-8. Разные форматы служат разным целям. Сокращения экономят место, но могут быть неоднозначными. Полные названия понятны, но занимают больше места. Форматы со смещением подходят, когда конкретное название часового пояса менее важно, чем разница во времени.

JavaScript предоставляет API Intl.DateTimeFormat для автоматического отображения названий часовых поясов. Этот урок объясняет, что такое названия часовых поясов, как они меняются между стандартным временем и временем летнего периода, а также как отображать их в разных форматах.

Понимание форматов названий часовых поясов

Названия часовых поясов представлены в нескольких различных форматах, каждый из которых имеет свои особенности.

Короткие названия используют сокращения, такие как PST, EST или JST. Они экономят место, но могут быть неоднозначными. Например, CST может означать Центральное стандартное время в Северной Америке, Китайское стандартное время или Кубинское стандартное время.

Длинные названия полностью пишут название часового пояса, такие как Pacific Standard Time, Eastern Standard Time или Japan Standard Time. Они избегают неоднозначности, но занимают больше места.

Общие названия относятся к часовому поясу без указания, используется ли в данный момент стандартное время или время летнего периода. Например, PT означает Тихоокеанское время, которое может быть как PST, так и PDT в зависимости от даты.

Форматы со смещением показывают разницу во времени относительно UTC. Например, GMT-8 означает 8 часов позади Гринвичского времени. GMT-05:00 означает 5 часов позади с двоеточием, разделяющим часы и минуты.

Выбор формата зависит от вашего случая использования. Используйте короткие названия, когда пространство ограничено, и допустима неоднозначность. Используйте длинные названия, когда важна ясность больше, чем экономия места. Используйте форматы со смещением, когда нужно показать числовую разницу относительно UTC.

Использование Intl.DateTimeFormat для отображения названий часовых поясов

Конструктор Intl.DateTimeFormat принимает опцию timeZoneName, которая управляет тем, как названия часовых поясов отображаются в форматированных датах и времени.

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));
// Вывод: "1/15/2025, 7:30 AM PST"

Это создает форматировщик для английского языка (США), который отображает время в часовом поясе America/Los_Angeles. Опция timeZoneName: 'short' добавляет сокращенное название часового пояса в вывод. Результат включает PST в конце.

Опция timeZone задает, какой часовой пояс использовать при форматировании. Опция timeZoneName управляет тем, отображать ли и как отображать название часового пояса. Эти две опции работают вместе. timeZone определяет преобразование, а timeZoneName определяет метку.

Отображение сокращенных названий часовых поясов

Опция timeZoneName: 'short' отображает сокращенные названия часовых поясов.

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));
// Вывод: "1/15/2025, 10:30 AM EST"

Краткий формат выводит EST для восточного стандартного времени. Этот формат компактен и хорошо подходит для таблиц, списков или других макетов с ограниченным пространством.

Разные часовые пояса создают разные сокращения.

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)}`);
});
// Вывод:
// 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

Каждый часовой пояс имеет свое стандартное сокращение. Pacific использует PST, Central — CST, Eastern — EST, London — GMT, а Tokyo — JST.

Отображение длинных названий часовых поясов

Опция timeZoneName: 'long' отображает полные названия часовых поясов.

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));
// Вывод: "1/15/2025, 7:30 AM Pacific Standard Time"

Длинный формат выводит Pacific Standard Time вместо PST. Это устраняет двусмысленность, но занимает значительно больше места.

Длинные названия подходят, когда важна ясность и есть достаточно места.

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));
// Вывод: "10:30 AM Eastern Standard Time"

Полное название четко указывает, какой часовой пояс используется, без необходимости расшифровывать аббревиатуру.

Отображение смещений часовых поясов

Опция timeZoneName: 'shortOffset' отображает смещение UTC в компактном формате.

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));
// Вывод: "7:30 AM GMT-8"

Это отображает GMT-8, указывая, что часовой пояс на 8 часов отстает от UTC. Формат смещения подходит, когда конкретное название часового пояса менее важно, чем числовое отношение к UTC.

Опция timeZoneName: 'longOffset' отображает смещение с часами и минутами.

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));
// Вывод: "7:30 AM GMT-08:00"

Это отображает GMT-08:00 с двоеточием между часами и минутами. Этот формат более точный и соответствует стандартам ISO 8601.

Часовые пояса с получасовыми или 45-минутными смещениями показывают полное смещение в длинном формате.

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));
// Вывод: "9:00 PM GMT+05:30"

Индийское стандартное время имеет смещение на 5 часов 30 минут от UTC. Длинный формат смещения отображает это как GMT+05:30.

Отображение общих названий часовых поясов

Опция timeZoneName: 'shortGeneric' отображает общее сокращение, которое применяется независимо от того, действует ли летнее время.

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));
// Вывод: "7:30 AM PT"

console.log(summerFormatter.format(summerDate));
// Вывод: "8:30 AM PT"

И зимние, и летние даты отображают PT для Тихоокеанского времени. Общий формат не различает Тихоокеанское стандартное время и Тихоокеанское летнее время. Это удобно, когда требуется единообразная метка независимо от сезона.

Опция timeZoneName: 'longGeneric' предоставляет полное общее название.

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));
// Вывод: "7:30 AM Pacific Time"

Этот формат отображает Pacific Time вместо Pacific Standard Time. Общий длинный формат обеспечивает ясность без указания стандартного или летнего времени.

Как летнее время влияет на названия часовых поясов

Названия часовых поясов меняются между стандартным временем и летним временем. Опция timeZoneName автоматически отражает эти изменения.

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));
// Вывод: "7:30 AM PST"

console.log(formatter.format(summerDate));
// Вывод: "8:30 AM PDT"

В январе форматтер отображает PST для Тихоокеанского стандартного времени. В июле он отображает PDT для Тихоокеанского летнего времени. Форматтер автоматически выбирает правильное название в зависимости от даты.

Смещение также меняется между стандартным и летним временем.

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));
// Вывод: "7:30 AM GMT-8"

console.log(formatter.format(summerDate));
// Вывод: "8:30 AM GMT-7"

Зимой Тихоокеанское время соответствует GMT-8. Летом оно соответствует GMT-7. Смещение изменяется на один час, когда начинается летнее время.

Длинные названия также отражают изменения.

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));
// Вывод: "7:30 AM Pacific Standard Time"

console.log(formatter.format(summerDate));
// Вывод: "8:30 AM Pacific Daylight Time"

Длинный формат меняется с Pacific Standard Time на Pacific Daylight Time. Форматтер автоматически обрабатывает эти переходы в зависимости от даты и часового пояса.

Отображение названий часовых поясов на разных языках

Названия часовых поясов отображаются по-разному на разных языках. Идентификатор локали определяет, какой язык использует форматировщик для названий часовых поясов.

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));
// Вывод: "7:30 AM Pacific Standard Time"

console.log(esFormatter.format(date));
// Вывод: "7:30 hora estándar del Pacífico"

console.log(frFormatter.format(date));
// Вывод: "07:30 heure normale du Pacifique"

На английском отображается Pacific Standard Time. На испанском — hora estándar del Pacífico. На французском — heure normale du Pacifique. Каждый язык использует свой перевод названия часового пояса.

Короткие названия часто остаются одинаковыми на всех языках, так как они являются аббревиатурами.

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));
// Вывод: "7:30 AM PST"

console.log(esFormatter.format(date));
// Вывод: "7:30 PST"

И на английском, и на испанском используется PST для короткой аббревиатуры. Однако в испанском примере отсутствует индикатор AM, так как форматирование на испанском отличается от английского.

Смещения остаются числовыми на всех языках.

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));
// Вывод: "7:30 AM GMT-08:00"

console.log(jaFormatter.format(date));
// Вывод: "7:30 GMT-08:00"

И на английском, и на японском отображается GMT-08:00 для смещения. Числовые смещения не требуют перевода.

Отображение только названия часового пояса

Вы можете отображать только название часового пояса, исключив другие компоненты даты и времени.

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));
// Вывод: "Pacific Standard Time"

Когда вы указываете только timeZoneName без других опций, форматировщик выводит только название часового пояса. Это полезно, если вам нужно отображать часовой пояс отдельно от даты и времени.

Вы можете использовать это для создания меток или легенд.

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));
});
// Вывод:
// Pacific Standard Time (или Pacific Daylight Time в зависимости от даты)
// Central Standard Time (или Central Daylight Time в зависимости от даты)
// Eastern Standard Time (или Eastern Daylight Time в зависимости от даты)
// Greenwich Mean Time (или British Summer Time в зависимости от даты)
// Japan Standard Time

Это создает список названий часовых поясов, подходящих для отображения в выпадающем меню или интерфейсе выбора.

Комбинирование названий часовых поясов с определенными форматами даты

Вы можете комбинировать названия часовых поясов с определенными параметрами форматирования даты и времени.

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));
// Вывод: "Wednesday, January 15, 2025, 10:30 AM EST"

Это сочетает полный формат даты с коротким названием часового пояса. Вывод включает день недели, полное название месяца, день, год, время и сокращение часового пояса.

Вы можете использовать это для создания полного отображения даты и времени.

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));
// Вывод: "Wednesday, January 15, 2025 at 7:30:00 AM Pacific Standard Time"

Обратите внимание, что опция timeZoneName не может использоваться вместе с dateStyle или timeStyle. Если вам нужно использовать сокращенные стили, название часового пояса уже включено в стили времени long и 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));
// Вывод: "Wednesday, January 15, 2025 at 7:30:00 AM PST"

Стиль времени long автоматически включает короткое название часового пояса. Вам не нужно указывать timeZoneName отдельно.

Отображение названий часовых поясов для расписания событий

Названия часовых поясов помогают пользователям понять, когда происходят события в разных регионах.

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)}`);
});
// Результат:
// Kickoff Meeting: Mar 15, 9:00 AM EST
// Design Review: Mar 15, 9:00 AM PST
// Sprint Planning: Mar 16, 10:00 AM JST

Каждое событие отображается с указанием его локального часового пояса. Пользователи могут видеть, что Kickoff Meeting начинается в 9:00 утра по восточному времени, Design Review — в 9:00 утра по тихоокеанскому времени, а Sprint Planning — в 10:00 утра по японскому времени.

Вы также можете показать одно и то же событие в нескольких часовых поясах.

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)}`);
});
// Результат:
// Global Team Meeting:
// Pacific: 9:00 AM PST
// Central: 11:00 AM CST
// Eastern: 12:00 PM EST
// London: 5:00 PM GMT

Это демонстрирует время одной встречи, преобразованное в несколько часовых поясов. Участники команды из разных регионов могут быстро найти свое местное время.